如果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);
    }
});

沒有測試，但是您知道了。