我有一个位置元素:fixed,bottom:0px。 当我向下滚动页面时,这个元素应该跟着我,直到它靠近页脚,让我说100px高度,我试图让元素保持在底部:0px直到它到达页脚元素,在那一刻它应该总是让页脚元素低于它。
这是我的css:
#backToTop{
width:80px;
height:50px;
background:#333;
color:#FFF;
text-align:center;
border-radius:10px 10px 0 0;
padding-top:10px;
position:fixed;
bottom:0;
left:50%;
margin-left:550px;
}
我已经研究过Jquery的$(document).height()
和$(window).scrollTop()
来尝试提出某种条件,它会检测元素的位置何时接近页脚,但没有成功(高度)我的页脚是120):
$(window).scroll(function(){
if($(document).height()-($(window).scrollTop()+$(window).height()) <= 120){
$('#backToTop').css({'bottom':$(document).height()-($(window).scrollTop()+$(window).height())});
}else{
$('#backToTop').css('bottom',0);
}
});
我不太清楚这些值究竟指向哪里,任何提示?感谢。
答案 0 :(得分:2)
尝试为#backToTop元素创建两个类,一个用于固定,另一个用于相对位置。当页脚到达视口时,#backToTop元素将其类更改为“relative”。
HTML:
<div id="container">
<div id="backToTop" class="fixed_pos">Top</div>
<footer>footer</footer>
</div>
CSS:
#container {
width: 100%;
height: 1000px;
float: left;
}
#backToTop {
width:80px;
height:50px;
background:#333;
color:#FFF;
text-align:center;
border-radius:10px 10px 0 0;
padding-top:10px;
left: 50%;
margin-left: -40px;
}
.fixed_pos {
position:fixed;
bottom:0;
}
.relative_pos {
position: relative;
top: 100%;
}
footer {
width: 100%;
height: 200px;
float: left;
position: relative;
top: 100%;
background: #333;
color: #fff;
text-align: center;
}
看看这里:
答案 1 :(得分:0)
您可以使用新的position:sticky
属性来获得类似的结果。
这是CSS代码,您想要放置在固定中的<div>
必须放在距离底部100px的页面流中:
div{
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
bottom: 0px;
line-height: 30px;
background: gray;
}
我不知道实际的position:sticky
支持(我知道它确实适用于Chrome),但您可能会认为在丢失时使用了一些填充物。