如果CSS具有特殊价值，请不要执行jQuery脚本

Question

在我的网站上，左侧有一个侧边栏DIV，右侧有一个文本DIV。 我想让侧边栏跟随读者，当他或她向下滚动时，所以我做了DuckDuckGo，发现了一点，然后根据我的需要对其做了一些修改：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){

    var $sidebar = $('#sidebar'),
        sidebarOffset = $sidebar.offset(),
        $window = $(window),
        gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
        distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
        footerHeight = $('#footer').outerHeight();

    $window.scroll(function(){
        distance = ($window.scrollTop()) - (sidebarOffset.top - gap);        
        if ( distance > 0 ) {
            $sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
        } else {
            $sidebar.css({'top': '0', 'position': 'relative'});
        }

    })

});    

});//]]>  

</script>

它就像我想要的那样工作。 但是，我的网站使用Skeleton框架来处理响应式设计。 我对它进行了设计，以便当它下降到移动设备（水平然后是垂直）时，边栏将从文本的左侧移动到其上方，以便文本DIV可以采用100％的宽度。 您可能会想像到，当您向下滚动时，此脚本会导致边栏覆盖部分文本。

我对jQuery完全陌生，我通过反复试验尽我所能，但我已经放弃了。 我需要帮助的是，如果某个DIV具有某个CSS值（即， display: none #header-logo display: none ），则使该脚本不执行。

理想情况下，脚本应在用户调整浏览器大小时（而不是在网站加载时）检查此情况，以防用户将浏览器窗口的大小从正常大小更改为移动大小。

我认为将其包裹在IF-ELSE语句中就足够了，但是现在我开始将头发拔出头来。 而且由于我的头发也不多，因此我需要帮助！

在此先多谢！

Answer 1

$("#headerLogo").css("display")将为您带来价值。

http://api.jquery.com/css/

我还看到您只希望在调整大小时发生这种情况，因此将其包装在jquery的resize()函数中：

https://api.jquery.com/resize/

Answer 2

此函数将在调整窗口大小时执行，并检查#header-logo是否可见。

$(window).resize(function() {
    if ($('#header-logo').is(':visible')) {
        // Your code
    }
});

我认为您需要在加载时进行检查，因为您不知道用户是否将以移动视图开始。 您可以执行以下操作：

$(window).resize(function() {
    if ($('#header-logo').is(':visible')) {
        // Your code
    }
}).resize();

这将在加载和调整大小时执行。

编辑：如果#header-logo不可见，您可能需要关闭滚动功能。 因此，您需要在外部创建函数，而不是在scroll事件内部创建函数：

$(window).resize(function() {
    if ($('#header-logo').is(':visible')) {
        var $sidebar = $('#sidebar'),
            sidebarOffset = $sidebar.offset(),
            $window = $(window),
            gap = $('#header').css('marginBottom').replace(/[^-\d\.]/g, ''),
            distance = ($window.scrollTop()) - (sidebarOffset.top - gap),
            footerHeight = $('#footer').outerHeight();

        function myScroll() {
            distance = ($window.scrollTop()) - (sidebarOffset.top - gap);        
            if ( distance > 0 ) {
                $sidebar.css({'top': gap + 'px', 'position' : 'fixed'});
            } else {
                $sidebar.css({'top': '0', 'position': 'relative'});
            }
        }

        $window.on('scroll', myScroll);
    } else {
        $(window).off('scroll', myScroll);
    }
});

没有测试，但是您知道了。