JavaScript通过滚动添加一次类

我想在用户滚动时向导航添加一个类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>150时，它总是给nav一个类

---

所以当我继续在inspect元素中上下滚动时，它添加了很多相同的类。如何只添加一次类，或者您有其他解决方案。我有2个导航栏，我只想在用户滚动后修复2个导航栏，这样他就看不到最上面的导航栏了。

您使用的是jQuery，所以请使用：

nav.addClass("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);

---

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

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);

var-nav；
函数yScroll（）{
nav=document.getElementById（'nav'）；
yPos=window.pageYOffset；
var isThereClass=nav.className.indexOf（“导航条固定顶部”）；
如果（yPos>150&&IsThere类==-1）{
nav.className=nav.className+“导航条固定顶部”；
}else if（yPos<150&&isthere类！=-1）{
nav.className=nav.className—“导航条固定顶部”；
}
}
window.addEventListener（“滚动”，yScroll）；

正确，jQuery足够聪明，只需添加一次类。但为什么要将jQuery与非jQuery javascript混合使用呢？当我在控制台中向下滚动时，我看到越来越多的错误，Uncaught TypeError:undefined不是函数124main.js:5 Uncaught TypeError:undefined不是函数main.js:5 yscroll忘记更改行

nav=document.getElementById（'nav'）至
nav=$（'#nav'）这将创建作为Jquery对象的变量。
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);