Question

我不想为此使用jQuery。

这很简单，我只是想在滚动一定数量的像素（比如10px）后添加一个类，如果我们回到前10个像素就删除它。

我最好的尝试是：

var scrollpos = window.pageYOffset;
var header = document.getElementById("header");

function add_class_on_scroll() {
    header.classList.add("fade-in");
}

function remove_class_on_scroll() {
    header.classList.remove("fade-in");
}

window.addEventListener('scroll', function(){
    if(scrollpos > 10){
        add_class_on_scroll();
    }
    else {
        remove_class_on_scroll();
    }
    console.log(scrollpos);
});

但是无论向上或向下滚动，控制台都会显示一个继续增长的数字。并且类fade-in永远不会被添加，虽然控制台显示我们已超过10。

Answer 1

您忘记更改滚动处理程序中的偏移值。

//use window.scrollY
var scrollpos = window.scrollY;
var header = document.getElementById("header");

function add_class_on_scroll() {
    header.classList.add("fade-in");
}

function remove_class_on_scroll() {
    header.classList.remove("fade-in");
}

window.addEventListener('scroll', function(){ 
    //Here you forgot to update the value
    scrollpos = window.scrollY;

    if(scrollpos > 10){
        add_class_on_scroll();
    }
    else {
        remove_class_on_scroll();
    }
    console.log(scrollpos);
});

现在您的代码正常运行

说明

没有相关文件，就像你要求的那样。这只是逻辑工作流程中的一个问题。

如果您说scrollpos = window.scrollY您的页面的顶部偏移量为0，那么您的变量会存储该值。页面滚动时，您的scroll侦听器将会触发。当您的侦听器检查scrollpos值时，值当然仍为0。但是，如果在每个滚动处理程序中更新scrollpos值，现在您可以拥有动态值。

另一种选择是你创建一个getter，比如

var scrollpos = function(){return window.scrollY};

通过这种方式，您可以动态检查每个偏移量将为您返回的内容。

if(scrollpos() > 10)

请参阅？希望有所帮助。（：

Answer 2

实现所需内容的一种简单方法（scroll事件中的一行代码）：

＆＃13;

window.addEventListener('scroll', function(e) {
    document.getElementById('header').classList[e.pageY > 10 ? 'add' : 'remove']('fade-in');
});

＆＃13;

#header {
  height: 600px;
}

.fade-in {
  background-color: orange;
}

＆＃13;

<div id='header'></div>

＆＃13;

Answer 3

只需使用classList

中的方法切换即可

header.classList.toggle('fade-in')

滚动x金额后，纯js添加和删除（切换）类？

3 个答案:

说明