javascript - 通过 jQuery 在某个滚动级别更改 CSS 不起作用

Question

以下 jQuery 代码:

Click here

HTML:
<header class="header">
    <div class="navbar">   
        Hello
    </div>
</header>

CSS:
.header {
        background-color: black;
        height: 1000px;
        width: 300px;
        color: white;
        text-align: center;
        padding: 30px;
    }

.fixed .navbar{
    border: 10px solid red;
    position: fixed;
    background-color: white;
}

.navbar {
    background-color: blue;
    height: 50px;
    width: 300px;
    color: white;
}

JS:
$(window).scroll( function(){
        if($(window).scrollTop() > 200) $("header").addClass("fixed");
        else $("header").removeClass("fixed");    
    });

确实有效。

但是当我将它添加到我的主页时，我必须刷新页面才能添加“固定”类。但我希望在向下滚动的同时实时添加类(class)，而无需刷新页面。这在 jsfiddle 中有效，为什么它在我的页面上无效？

我的页面:Click here

Answer 1

正如 Karl-André 所说，您的 $ 对象正在被覆盖。要使您的代码正常工作，您可以执行以下任一操作:

使用 jQuery 对象:

jQuery(window).scroll( function(){
    if(jQuery(window).scrollTop() > 200) jQuery("header").addClass("fixed");
    else jQuery("header").removeClass("fixed");    
});

或者将所有内容包装在一个自执行函数中，将 jQuery 对象作为参数传递:

(function($)
{
    $(window).scroll( function(){
        if($(window).scrollTop() > 200) $("header").addClass("fixed");
        else $("header").removeClass("fixed");    
    });
}(jQuery))