我的两个 jQuery 代码相互冲突

Question

我不太擅长 JavaScript 或 jQuery。我有两段不同的代码，但后者似乎与第一段冲突。

我的第一个代码是为滚动导航添加背景颜色：

jQuery(function () {

    jQuery(document).ready(function(){

        jQuery(window).on("scroll",function(){

            if(jQuery(document).scrollTop() > 200)
                jQuery(".header").css({backgroundColor:"#4A6971"});
            else
                jQuery(".header").css({backgroundColor:"transparent"});

        })

    })

});

我的第二个代码是触发我从 animate.css 获得的动画淡入：

jQuery(function () {

    jQuery(window).scroll(function () {
        console.log(jQuery(window).scrollTop());
        var topDivHeight = jQuery(".showcase_div").height();
        var viewPortSize = jQuery(window).height();

        var triggerAt = 150;
        var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

        if (jQuery(window).scrollTop() >= triggerHeight) {
            jQuery('.pic1').css('visibility', 'visible').hide().fadeIn();
            jQuery(this).off('scroll');
        }
    });

});

为什么第二个代码与第一个代码冲突？自从我添加了第二个代码后，导航上的背景颜色不再出现。

谁能帮忙？

Answer 1

线

jQuery(this).off('scroll');

removes all event handlers，通过 jQuery 注册的，包括你的第一个。您有两种选择来缓解这种情况：

1. 命名您的第二个事件处理函数并明确删除它：

   function foo() {
       // ...
       jQuery(this).off('scroll', foo /* <- same name as above */);
   }
   jQuery(window).scroll(foo);
   

2. 或使用.one()，它会在第一次运行后自动注销：

   jQuery(window).one('scroll', function() {
       // ...
   });