我有这个Jquery代码,它的作用是在向下滚动时向div添加一个固定类。
现在我要做的是在它到达页面底部时删除此固定类,并添加一个带有position:absolute;
和margin-bottom:200px;
的新类,以避免此框位于页脚上方在页面底部完成滚动时。
你可以在JsFiddle文件中看到它,以便更好地理解我想要完成的任务:http://jsfiddle.net/hcb4v21r/
$(document).on("scroll",function(){
if($(document).scrollTop()>150){
$("#item-nav").addClass("fixedProfileNav");
}
else{
$("#item-nav").removeClass("fixedProfileNav");
}
});
我知道,如果我做这样的事情,它会完成这项工作,但它不起作用:
$(document).on("scroll",function(){
if($(document).scrollTop()>80%){
$("#item-nav").removeClass("fixedProfileNav");
}
else{
$("#item-nav").addClass("fixedProfileNavBottom");
}
});
CSS
.fixedProfileNavBottom{
position:absolute;
margin-bottom:200px;
}
当它占据80/90%的页面时删除固定类,但我不知道这是否是正确的方法
答案 0 :(得分:1)
您可以考虑更改代码行
if($(document).scrollTop()>80%){
到
if($(document).scrollTop()>(window.innerHeight * 0.85)){
或
if($(document).scrollTop()>($(document).innerHeight() * 0.85)){
或
if(($(document).scrollTop() + window.innerHeight)>($(document).innerHeight() * 0.85)){