當瀏覽器的尺寸小於800px時如何隱藏div

Question

好的，所以我才剛剛開始學習jquery，並且我處於一個樹樁。 我在這里嘗試使用此javascript：

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

        };
    }); 
});

基本上應該做的是向下滾動時，元素“ mobile-nav”在向下滾動890px時會逐漸消失，而在向下滾動時仍會出現。 當您滾動回到頂部並通過該特定位置時，它將消失。 該部分效果很好，但不起作用的部分是當瀏覽器的寬度小於800px時，移動導航將保持隱藏或不顯示。 但是它會一直顯示，並且當瀏覽器調整為800px時不會隱藏。 這是一個小問題，但很煩人。

這也是您需要檢查的移動導航的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;
}

編輯：這是我正在處理的站點，當前在制品。 這是簽出查看我在說什么的鏈接。 只需向下滾動，您將看到左側出現的移動導航。 http://tronixinteractive.com/jcarter-designs2/

Answer 1

@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;
  }
}

Answer 2

我知道您可能更喜歡基於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
     }
}

Answer 3

您的代碼有誤。 您可以隱藏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();

        };
    }); 
});