I really cannot figure it out how can I accomplish this. I need to have a footer partially visible all the time at the bottom. When you hover it shows up entire height of 400px, then get back to the original position. The problem that I have is with the scroll function. I do not know how to set it properly. The result I am looking for is when you scroll all the way down (without hovering) the footer needs to take the full height, if you scroll up the footer goes back to the original position.
Here is the jsFiddle (I hope it works, this is the first time when I use this).
Below is the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
if ($(window).scrollTop() > $('#move').position() -500) {
$('#footer').css('bottom', 0);
}
else {
$('#footer').css('bottom', -300);
}
});
$(document).ready(function () {
$('#footer').bind('mouseenter', function () {
$(this).stop().animate({ bottom: 0 }, 400); // on hover 0 400
}).bind('mouseleave', function () {
$(this).stop().animate({ bottom: -300 }, 400); // on out -300 400
});
});
</script>
<style>
html, body{
}
#footer {
position: fixed;
z-index: 999;
bottom: -300px;
width: 100%;
height: 400px;
background-color: #999;
opacity:0.5;
}
#content {
padding-bottom: 100px;
}
#move {
height:auto;
top: 5000px;
position: relative;
background-color:red;
}
</style>
</head>
<body>
<div id="content">
<h1 id="move"> end content </h1>
</div>
<div id="footer">
this is the footer
</div>
</body>
</html>
