javascript - スクロール位置に基づいてdivにクラスを追加するための有効なjQueryのように見えるものがありますが、何もしていません

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