如何在瀏覽器調整到小於800px時隱藏div

好吧，所以我剛開始學習jQuery，而且我處於一個殘缺狀態。我在這裏有這個JavaScript，我試圖讓工作：如何在瀏覽器調整到小於800px時隱藏div

$(function(){ 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > 890) { 
      $(".mobile-nav:hidden").css('visibility','visible'); 
      $(".mobile-nav:hidden").fadeIn('slow'); 
     } 
     else {  
      $(".mobile-nav:visible").fadeOut("slow"); 
     } 

     if ($(window).width() < 800) { 
      $('.mobile-nav').hide(); 

     }; 
    }); 
});

基本上它是假設做的是，當你向下滾動，元素「移動導航」會當你向下滾動890px淡入和意志當你繼續滾動時，保持出現。當您回滾到頂部並通過特定位置時，它會淡出。該部分工作的很好，但不起作用的部分是當瀏覽器的寬度小於800px時，mobile-nav將保持隱藏或不顯示。但它一直在出現，並且在瀏覽器調整到800像素時不會隱藏。它是一個小而煩人的問題。

這裏是移動導航的CSS爲您檢查，以及：

.mobile-nav{ 
    width:90px; 
    height: 600px; 
    float:left; 
    background-color:#000; 
    z-index:1; 
    position:fixed; 
    visibility:hidden; 
    top:20px; 
    left:0; 
    right:0; 
    bottom:0; 
}

編輯：這裏是我的地盤我的工作，目前WIP。這裏是鏈接檢查，看看我在說什麼。只需向下滾動，即可看到左側的移動導航欄。 http://tronixinteractive.com/jcarter-designs2/

來源

2014-09-13 Josh C

這通常是使用CSS媒體查詢做到：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – MSTannu 2014-09-13 19:34:16

你能暴露你的HMTL ？ – felipekm 2014-09-13 19:34:29

[@media]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#width） – 2014-09-13 19:34:36

我知道你也許會喜歡一個基於jQuery的答案，但是這可能是與媒體查詢更容易處理。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

CSS

.mobile-nav { 
    //normal styling 
} 
//now just wrap size specific styling in a media query. 
@media (max-width: 800px) { 
    .mobile-nav { 
      display: none !important 
      //!important added to overule jquery adding the style directly on element 
    } 
}

來源

2014-09-13 19:37:48

雅我試過了，但我的手機導航仍然顯示:(。 – 2014-09-13 19:52:54

也許這是因爲jquery是直接添加到元素的樣式，這將否決任何css更改顯示：無顯示：無！重要。這將防止overulling。 – 2014-09-13 20:08:42

您的代碼有誤。您在滾動時隱藏您的div和fadeIn。

$(function(){ 
    $(window).scroll(function() { 
     if ($(window).width() < 800) { 
     if ($(this).scrollTop() > 890) { 
      $(".mobile-nav:hidden").css('visibility','visible'); 
      $(".mobile-nav:hidden").fadeIn('slow'); 
     } 
     else {  
      $(".mobile-nav:visible").fadeOut("slow"); 
     } 

     } else { 
      $('.mobile-nav').hide(); 

     }; 
    }); 
});

來源

2014-09-13 19:34:32 Alex

對不起，沒有工作:(. – 2014-09-13 19:57:26

@media screen and (max-width: 800px) { 
    .mobile-nav{ 
    width:90px; 
    height: 600px; 
    float:left; 
    background-color:#000; 
    z-index:1; 
    position:fixed; 
    visibility:hidden; 
    top:20px; 
    left:0; 
    right:0; 
    bottom:0; 
    } 
}

來源

2014-09-13 19:37:24

歡迎來到SO。你的答案很可能會downvoted，因爲沒有關於代碼的解釋。 – emmanuel 2014-09-13 19:43:27

不幸的是，這不起作用。我嘗試了所有使用媒體查詢，但它沒有工作 – 2014-09-13 19:52:10

如何在瀏覽器調整到小於800px時隱藏div

回答

相關問題