javascript - 当浏览器的尺寸小于800px时如何隐藏div

好的，所以我才刚刚开始学习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();

        };
    });
});

基本上应该做的是向下滚动时，向下滚动890px时，“ mobile-nav”元素会淡入，而向下滚动时，该元素将一直显示。当您滚动回到顶部并通过该特定位置时，它将消失。该部分效果很好，但不起作用的部分是当浏览器的宽度小于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/

最佳答案

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

关于javascript - 当浏览器的尺寸小于800px时如何隐藏div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25826875/