javascript - 如何在浏览器调整到小于 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 时淡入，并在您继续向下滚动时保持显示。当您滚动回顶部并经过该特定位置时，它将淡出。那部分效果很好，但不起作用的部分是当浏览器的宽度小于 800 像素时，移动导航将保持隐藏状态或不显示。但它一直出现，并且不会在浏览器调整到 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

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