Jquery Media查詢

下面的代碼是根據滾動位置相應地擴展和縮小的標題。腳本本身很好，但在移動版本中，擴展功能不是必需的，所以我想根據屏幕大小禁用此功能，這與如何通過媒體查詢更改和禁用css類似。我是想根據屏幕大小來禁用該代碼的執行：Jquery Media查詢

$(document).ready(function() { 

    var pageWidth = $(window).width();  
    var scroll = getCurrentScroll(); 
    var shrinkHeader = 300; 

    $(window).scroll(function() { 
    var scroll = getCurrentScroll(); 
     if (pageWidth > 800 && scroll >= shrinkHeader) { 
      $('.nav_container').addClass('shrink'); 
     } 
     else { 
      $('.nav_container').removeClass('shrink'); 
    } 
}); 

function getCurrentScroll() { 
    return window.pageYOffset || document.documentElement.scrollTop; 
} 
});

我已經更新了代碼

*****通過增加窗口寬度腳本它的工作原理，但它仍然很漂亮。當它落在800窗口寬度以下時，代碼不會執行（按照預期），但擴展頭的css保持默認（我猜），當它應該是較小頭的css時（removeClass（'shrink' ）

來源

2015-01-26 user3345367

只是測試[改變'$（window）.width（）']（http://api.jquery.com/width/）。 – Blazemonger 2015-01-26 18:22:30

你有沒有考慮在'min-width ...'媒體查詢中定義'shrink'類，所以當你處於移動寬度時它不起作用？ – 2015-01-26 18:22:51

測試屏幕寬度並執行或不執行您當前的代碼 – Huangism 2015-01-26 18:22:56

你rezising窗口如果是這樣，那麼你就需要一個事件處理程序，是這樣的：？

$(window).resize(function() { 

// Your code here 

});

的另一點是，你應該檢查設備的方向

來源

2015-01-26 18:56:57 Joerg

，它仍然保持默認大小，而不是更小的大小 – user3345367 2015-01-26 19:01:05

你。不應該依賴JavaScript來使頁面響應不同的分辨率或屏幕大小，CSS可以使用0123來處理。

但是你可以做這樣的事情並創建兩個不同的CSS頁面。然後，只要屏幕分辨率調整到一定的大小，CSS也會改變。

function adjustStyle() { 
     var width = 0; 
     // get the width.. more cross-browser issues 
     if (window.innerHeight) { 
      width = window.innerWidth; 
     } else if (document.documentElement && document.documentElement.clientHeight) { 
      width = document.documentElement.clientWidth; 
     } else if (document.body) { 
      width = document.body.clientWidth; 
     } 
     // now we should have it 
     if (width < 800) { 
      document.getElementById("myCSS").setAttribute("href", "css/narrow.css"); 
     } else { 
      document.getElementById("myCSS").setAttribute("href", "css/main.css"); 
     } 
    } 

    // now call it when the window is resized. 
    window.onresize = function() { 
     adjustStyle(); 
    };

來源

2015-01-26 19:14:38

您需要檢查滾動功能裏面你的窗口寬度所以它是正確的寬度每次

$(window).scroll(function() { 
    var scroll = getCurrentScroll(); 
    var pageWidth = $(window).width(); 

    if (pageWidth > 800) { 
     (scroll >= shrinkHeader) ? $('.nav_container').addClass('shrink') : $('.nav_container').removeClass('shrink'); 
    } 
});

從文檔準備刪除窗口寬度變種。如果頁面小於800像素，則不會執行滾動中的任何操作。如果頁面大於800像素，則只需檢查shrinkheader。

如果您希望您的網頁，當你調整，你需要做的$(window).resize(function() { }內同樣的事情，在這一點上，你應該把代碼中的函數，只是把它的滾動和縮放

來源

2015-01-26 19:23:17 Huangism

Jquery Media查詢

回答

相關問題