我的两个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

行