Question

当页面开始向下滚动时，我目前正在尝试更改标题[id ='site-header']的颜色。我试图在窗口滚动超过100px之后向标题添加一个类。我正在使用Wordpress开发网站，由于某种原因，当我打开Wordpress的定制程序时，代码可以工作，但否则无法工作。

HTML

<body class="home-page bp-nouveau home page-template-default page page-id-5 logged-in admin-bar no-customize-support geodir_advance_search geodir-page sd-common sd sd-homepage no-js gd-map-auto">
<div id="ds-container" >
<header id="site-header" class="site-header " role="banner" style="">
<div class="container">

JavaScript

<script type="text/javascript">
jQuery(document).scroll(function( $ ){
if(jQuery(document).scrollTop() > 100) {
   document.getElementById('#site-header').addClass('active');
} else {
        //remove the background property so it comes transparent again (defined in your css)
   document.getElementById('#site-header').removeClass('active');
    }
});
</script>

知道为什么会这样吗？该网站的链接为this。

Answer 1

我发现此代码至少存在3个问题：

1）元素的ID为site-header-而不是#site-header，它只是CSS选择器。

2）您正在将jQuery与香草JS混合使用-本身并没有错，但是通过调用addClass返回的对象没有getElementById方法。您需要在此“元素”对象上调用classList.add(...)，或者（更容易使用，因为您已经在使用jQuery）只需使用jQuery：jQuery('#site-header').addClass('active');（我怀疑这种jQuery或非混淆是什么在您的原始JS代码中造成了“＃”错误。

3）最佳实践是将此类内容包装在传递给jQuery document.ready()的回调函数中-否则甚至可能不会创建事件侦听器。（我假设document对象在代码运行时可能确实存在，所以这可能无关紧要，但这仍然是最佳实践。）

Answer 2

下面的代码应该对您有用。用下面的代码替换您当前的jQuery / javascript代码。

jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
        var sTop= jQuery(this).scrollTop();
        if(sTop > 100){
            jQuery('#site-header').addClass('active');
        } else {
            jQuery('#site-header').removeClass('active');
        }
    });
})

Javascript-滚动添加类无法正常工作

2 个答案: