Question

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

Answer 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)){

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

1 个答案: