Question

我想在用户滚动制作此脚本时向导航中添加一个navbar-fixed-top类：

var nav;
function yScroll(){
    nav = document.getElementById('nav');
    yPos = window.pageYOffset;
    if(yPos > 150){
        nav.className = nav.className + " navbar-fixed-top";
    } else {
        nav.className = nav.className - " navbar-fixed-top";
    }
}
window.addEventListener("scroll", yScroll);

但问题是，当yPos＆gt;时，它总会给出一个导航类。 150。

因此，当我继续在inspect元素中向上和向下滚动时，它会添加许多相同的类。如何只添加一次他的课程，或者你有其他解决方案。我有2个导航栏，我想在用户滚动后只修复2个，所以他再也看不到顶部了。

Answer 1

您正在使用jQuery，因此请使用：

nav.addClass("navbar-fixed-top")

和

nav.removeClass("navbar-fixed-top")

我想这可能是你想要的：

var nav;
function yScroll(){
    nav = $('#nav');
    yPos = window.pageYOffset;
    nav.removeClass("navbar-fixed-top");
    if(yPos > 150){
        nav.addClass("navbar-fixed-top");
    }
}
window.addEventListener("scroll", yScroll);

Answer 2

检查它是否已经有这样的类......

var nav;
function yScroll(){
    nav = document.getElementById('nav');
    yPos = window.pageYOffset;
    var isThereClass = nav.className.indexOf("navbar-fixed-top");
    if(yPos > 150 && isThereClass == -1){
        nav.className = nav.className + " navbar-fixed-top";
    } else if (yPos < 150 && isThereClass != -1) {
        nav.className = nav.className - " navbar-fixed-top";
    }
}
window.addEventListener("scroll", yScroll);

JavaScript通过滚动添加类

2 个答案: