Sticky Footer Animation
I made a blank website template(html5) in Dreamweaver CS6 to start with, following this smooth scroll tutorial https://www.youtube.com/watch?v=ohhPyKLMC94, which then I added a sticky footer- "BACK TO TOP". This was fine.
Then I wanted to add a bouncing animation on the footer in Edge Animate. Firstly, the footer stuck to the top; but the animation worked.
Secondly, I went to "Title_edgePreload.js" and changed all the positions in the .js from absolute to fixed, which was what I did in dreamweaver with the other links. This made the footer stick to the very bottom of the page, and did not stick to the screen but the animation worked.
If I cut out the part which is between <!--Adobe Edge Runtime--> and <!--Adobe Edge Runtime End-->,
It works without the animation.
Any ideas how I can make it sticky, or is there another way to animate it?
<!DOCTYPE html>
<!doctype html>
<html>
<style type="text/css">
#apDiv1 {
position: absolute;
width: 800px;
height: 115px;
z-index: 1;
top:50%;
left:50%;
margin-right: auto;
margin-left: auto;
}
</style>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body{
Margin:0;
font: 40px Tahoma, Geneva, sans-serif
}
section {
background-color: #999;
display: block;
height: 2000px;
padding: 0px;
padding-left: 120px
}
#one{
Background: #FFCA1F;
color: #FFF;
}
#two{
Background: #12B100;
color: #FFF;
}
#three{
Background: #71300D;
color: #FFF;
}
#four{
Background: #FF0000;
color: #FFF;
}
nav{
position:fixed;
}
nav a {
font-size: 12px;
color: #FFF;
background-color: #000;
text-align: center;
display: block;
margin: 3px;
padding: 10px;
}
nav1 {
position:fixed;
font-size: 12px;
color: #999999;
background-color: #F93;
text-align: center;
display: block;
margin: 0px;
padding: 10px;
bottom: 0px;
width: 100%;
}
.Colour {
color: #FFFFFF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});
});
}
}
});
// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
</script>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="Testscroll_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-14016602 {
visibility: visible;
font-size: 12px;
padding: 10px;
position: fixed;
margin: 0px auto;
display: block;
bottom: 0px;
}
img { display: block; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body>
<nav><a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<a href="#four">four</a>
</nav>
<nav1 class="edgeLoad-EDGE-12552702 edgeLoad-EDGE-14266872 edgeLoad-EDGE-14016602">
<a href="#title" class="Colour edgeLoad-EDGE-14016602">BACK TO TOP</a></nav1>
<section id="one">
<div>
<div align="centre"><img src="images/Fifa-2018_02.gif" alt="" name="title" width="800" height="232" id="title" align="absmiddle"></div>
</div>
</section>
<a href="#four"></a>
<section id="two">Page2</section>
<section id="three">Page3</section>
<section id="four">Page4</section>
</body>
</html>