当浏览器的尺寸小于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();

        };
    }); 
});