Question

我目前在使用我创建的脚本时遇到问题。本质上，代码可以根据滚动位置和窗口宽度激活固定div。因为响应观看时div的高度变小了。

这个问题是它似乎同时注册了这两个，所以优先考虑两者中的最后一个。任何帮助理解为什么它避免这些陈述将不胜感激。

HTML

<div id="homeBannerContainer" class="homeBannerContainer">
        <div id="homeBannerContent">
            <div id="bannerBig">
                <div id="bannerBigFixed">
                    <?php echo the_field('mast_head_title');?>
                    <div id="bannerBigFixedSmall"><?php echo the_field('mast_head_subtitle');?></div>
                </div>
            </div>
        </div>
</div>

的jQuery

$(window).scroll(function(){

    if (($("#homeBannerContainer").height() === 876) || ($(window).scrollTop() >= 780)){
         console.log("1 ");
         $('#headerContainer').css({background: 'url("http://yesyesdev.info/preventec/wp-content/themes/preventec/images/-homebanner.jpg")', position:'fixed', boxShadow: '5px -2px 15px #333'});
         $('body.home #click-menu .threeLines .line').addClass('lineAdapt');
         $('#headerContentLeft img').addClass('headerImageSmall');
         $('#headerContentRight').css({paddingTop: '25px'});
    } else {
         $('#headerContainer').css({background:'transparent', position:'fixed', boxShadow: '0px 0px 0px #333'});
         $('body.home #click-menu .threeLines .line').removeClass('lineAdapt');
         $('#headerContentLeft img').removeClass('headerImageSmall');
         $('#headerContentRight').css({paddingTop: '60px'});
    }


    if (($("#homeBannerContainer").height() === 440) || ($(window).scrollTop() >= 280)){
         console.log("2 ");
         $('#headerContainer').css({background: 'url("http://yesyesdev.info/preventec/wp-content/themes/preventec/images/-homebanner.jpg")', position:'fixed', boxShadow: '5px -2px 15px #333'});
         $('body.home #click-menu .threeLines .line').addClass('lineAdapt');
         $('#headerContentLeft img').addClass('headerImageSmall');
         $('#headerContentRight').css({paddingTop: '25px'});
    } else {
         $('#headerContainer').css({background:'transparent', position:'fixed', boxShadow: '0px 0px 0px #333'});
         $('body.home #click-menu .threeLines .line').removeClass('lineAdapt');
         $('#headerContentLeft img').removeClass('headerImageSmall');
         $('#headerContentRight').css({paddingTop: '60px'});
    }

});

谢谢

JQuery - 如果声明div'height'和'scrollTop'冲突

0 个答案: