修改jQuery只根據屏幕寬度觸發特定的CSS

我目前使用下面的jQuery使標題粘滯並固定在用戶向下滾動頁面時的位置，但我只想在屏幕寬度上將#logo設置爲display: none;小於768px（我正在使用各種樣式表和媒體查詢）。修改jQuery只根據屏幕寬度觸發特定的CSS

jQuery(window).scroll(function(){ 
     if(jQuery(window).scrollTop() > stickyHeaderTop) { 
       jQuery('.stickyheader').css({position: 'fixed', top: '0px'}); 
       jQuery('.stickyalias').css('display', 'block'); 
       jQuery('.stickyheader #logo').css('display', 'none'); 
     } else { 
       jQuery('.stickyheader').css({position: 'static', top: '0px'}); 
       jQuery('.stickyalias').css('display', 'none'); 
       jQuery('.stickyheader #logo').css('display', 'block'); 
     } 
});

我該怎麼才能觸發jQuery('.stickyheader #logo').css('display', 'none');這個場景？提前致謝。

來源

2014-01-06 zigojacko

你會好起來的添加/刪除一個類，並在你的CSS文件：

@media all and (max-width:768px) { 
    .hide_if_under_768px {display:none} 
}

一般來說這是一個壞主意，把原CSS在你的JavaScript（出於同樣的原因，它的普遍不好使用style="css here"屬性）

來源

2014-01-06 15:30:52

是的，這個工作，我簡單地添加'.addClass（'hide'）'到if語句和'.removeClass（'hide'）'我的發佈代碼中的else語句，然後設置'.hide'到CSS中的'display：none'。謝謝。 – zigojacko

修改jQuery只根據屏幕寬度觸發特定的CSS

回答

相關問題