如果CSS具有特定值，請勿執行jQuery腳本

Question

在我的網站上，我在左側有一個側邊欄DIV，右側有一個文本DIV。我想使側邊欄按照讀者，因爲他或她向下滾動，所以我DuckDuckGo'ed了一下，發現this然後稍微修改我的需求：

<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 framework來處理響應式設計。我已經設計了它，以便當它移動到移動設備（水平然後垂直）時，側欄從文本左側移動到文本左側，以便文本DIV可以佔據100％的寬度。正如您可以想象的那樣，該腳本會在您向下滾動時使邊欄覆蓋部分文本。

我完全新的jQuery和我通過試錯做我最好的，但我已經放棄了。我所需要的幫助是讓這個腳本如果某DIV具有一定的CSS值不執行（即#header-logo是display: none）。

理想的情況下，腳本應該檢查這個當用戶改變瀏覽器，而不是在網站負荷，萬一用戶調整從正常尺寸大小的移動瀏覽器窗口。

我想這應該足以把它包在一些if-else語句，但我開始到現在拉頭髮，我的頭。而且由於無論如何我的頭髮都沒有太多，所以我需要幫助！

非常感謝！

Answer 1

此功能將執行上的窗口大小調整，將檢查是否#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不可見，您可能需要關閉滾動功能。因此，而不是創建滾動事件裏面的功能，你需要之外創建它：

$(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); 
    } 
}); 

沒有測試它，但你的想法。

Answer 2

$("#headerLogo").css("display")會給你價值。

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

我也看到你只希望這種事情發生在調整大小，所以在jQuery的resize()功能把它包：

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