Мои два 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');

удаляет все обработчики событий , которые были зарегистрированы через jQuery, включая ваш первый. У вас есть два варианта, чтобы уменьшить это:

1. Назовите вашу функцию-обработчик второго события и удалите ее специально:

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

2. или используйте .one(), который автоматически отменяет регистрацию после первого запуска:

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