javascript - 我有一个似乎是有效的 jQuery，用于根据滚动位置向 div 添加一个类，但它没有做任何事情

Question

我的网站底部有以下 jQuery：

jQuery(document).ready(function($) {
    $(window).scroll(function() {
        var scroll_top = $(window).scrollTop(),
            scroll_height = $(window).height(), 
            bkgd = $('.background-image');
        if (scroll_top > scroll_height) {      
            $(bkgd).addClass('blur');   
        } else {      
            $(bkgd).removeClass('blur');
        }
    });
});

但是当我滚动时没有任何反应 - 没有类添加到 .background-image div。

（我是一个 jQuery 菜鸟，如果这是一个明显/愚蠢的问题，请提前道歉。）

Answer 1

您的变量名不匹配，首先是bkgd，然后是bgkd?

修复它使它对我有用？

<script type="text/javascript" >
jQuery(document).ready(function($) {
    $(window).scroll(function() {
        var scroll_top = $(window).scrollTop(),
            scroll_height = $(window).height(), 
            bkgd = $('.background-image');
        if (scroll_top > scroll_height) {      
            bkgd.addClass('blur');   
        } else {      
            bkgd.removeClass('blur');
        }
    });
});
</script>

小提琴

作为旁注，您可以将其缩短为：

jQuery(function($) {
    $(window).on('scroll', function() {
        $('.background-image').toggleClass('blur', $(window).scrollTop() > $(window).height());
    });
});