我真的无法弄清楚我怎么能做到这一点。我需要在底部始终显示一个部分可见的页脚。当您悬停时,它会显示400px的整个高度,然后返回原始位置。 我的问题是滚动功能。我不知道如何正确设置它。我要找的结果是当你一直向下滚动(没有悬停)时,页脚需要占据整个高度,如果向上滚动则页脚会回到原始位置。
这是jsFiddle(我希望它有效,这是我第一次使用它)。
以下是代码:
<!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>
答案 0 :(得分:0)
更新了小提琴:http://jsfiddle.net/moonspace/ZCger/1/
将此JS添加到'$(window).scroll(function(){}'
中if( $(window).scrollTop() + $(window).height() == $(document).height() ) {
$('#footer').css('bottom', 0);
}