我的网页底部有一个固定栏。在该栏中有几个按钮，其中包含网站上经常访问的页面。 我有一个位于页面底部的页脚。 我想做的是，当您向下滚动页面时，当您到达主要内容的底部时，我希望固定栏向上滚动并在其下方显示页脚。 实现这一目标的最佳方法是什么？ 下面是一个例子。红色代表整个页面。蓝色代表页面的可见部分。黄色是固定条。灰色是页脚。滚动到页面主要内容的末尾后，黄色固定栏将向上滚动，页脚将出现在下方。我的页面是这样设置的:
<div id="red">
<div id="blue"></div>
<div id="yellow"></div>
<footer></footer>
</div>
最佳答案
这是使用 Jquery 的解决方案:
绑定(bind) .scroll()到$(document)元素&检查OnScroll的ScrollTop是否到达
window 元素的末尾，在本例中为 footer 元素的 top。
然后动画你的fixed_element来显示它下面隐藏的foot元素。
这是我的代码:
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="js/jquery.js"></script><!-- Include Jquery -->
<script type="text/javascript">
/* Code to Handle Scroll */
$(document).ready(function(){
var hgh=$(".foot").height();
$(document).scroll(function(){
// Check Whether End Point is reached or not.
if($(window).scrollTop() >= $('.foot').offset().top + $('.foot').height() - window.innerHeight) {
$(".fixed_bar").animate({
"position":"fixed",
"bottom":""+hgh+"",
"right":"0px"
},100); // I'll Suggest to Use .fadeOut("100"); Here
}
else
{
$(".fixed_bar").animate({
"position":"fixed",
"bottom":"0px",
"right":"0px"
},100); // I'll Suggest to Use .fadeIn("100"); Here
}
});
});
</script>
<style type="text/css">
.fixed_bar{
position:fixed;
bottom:0px;
right:0px;
width:100%;
height:25px;
display:block;
background:#a77;
text-align:center;
color:#ddeeff;
}
body{
margin:0px;
width:100%;
height:100%;
}
.foot{
width:100%;
height:25px;
display:block;
background:#c33;
color:yellow;
text-align:center;
}
</style>
</head>
<body>
<center><h2>
o<br /><hr />
t<br /><hr />
h<br /><hr />
e<br /><hr />
r<br /><hr />
<br /><hr />
c<br /><hr />
o<br /><hr />
n<br /><hr />
t<br /><hr />
e<br /><hr />
n<br /><hr />
t<br /><hr />
<br /><hr /></h2></center>
<div class="foot">Footer</div>
<div class="fixed_bar">Bar Hiding The Footer</div>
</body>
</html>
这是工作
Fiddle
同理。
希望对您有所帮助。干杯 :).
关于jquery - 将 CSS 页脚固定为 float /Jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23693314/