到达页面底部时,将Jquery固定div更改为绝对值

时间:2014-11-19 04:11:30

标签: jquery css

我有这个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%的页面时删除固定类,但我不知道这是否是正确的方法

1 个答案:

答案 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)){