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

        };
    }); 
});

基本上，我们要做的是当你向下滚动时，当你向下滚动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;
}

编辑：这是我正在处理的网站，目前是WIP。这是查看我正在谈论的内容的链接。只需向下滚动，您就会看到左侧的移动导航。 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();

        };
    }); 
});

如何在浏览器调整大小小于800px时隐藏div

3 个答案: