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

好吧，所以我刚开始学习jQuery，而且我处于一个残缺状态。我在这里有这个JavaScript，我试图让工作：如何在浏览器调整到小于800px时隐藏div

$(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淡入和意志当你继续滚动时，保持出现。当您回滚到顶部并通过特定位置时，它会淡出。该部分工作的很好，但不起作用的部分是当浏览器的宽度小于800px时，mobile-nav将保持隐藏或不显示。但它一直在出现，并且在浏览器调整到800像素时不会隐藏。它是一个小而烦人的问题。

这里是移动导航的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/

来源

2014-09-13 Josh C

这通常是使用CSS媒体查询做到：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – MSTannu 2014-09-13 19:34:16

你能暴露你的HMTL ？ – felipekm 2014-09-13 19:34:29

[@media]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#width） – 2014-09-13 19:34:36

我知道你也许会喜欢一个基于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 
    } 
}

来源

2014-09-13 19:37:48

雅我试过了，但我的手机导航仍然显示:(。 – 2014-09-13 19:52:54

也许这是因为jquery是直接添加到元素的样式，这将否决任何css更改显示：无显示：无！重要。这将防止overulling。 – 2014-09-13 20:08:42

您的代码有误。您在滚动时隐藏您的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(); 

     }; 
    }); 
});

来源

2014-09-13 19:34:32 Alex

对不起，没有工作:(. – 2014-09-13 19:57:26

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

来源

2014-09-13 19:37:24

欢迎来到SO。你的答案很可能会downvoted，因为没有关于代码的解释。 – emmanuel 2014-09-13 19:43:27

不幸的是，这不起作用。我尝试了所有使用媒体查询，但它没有工作 – 2014-09-13 19:52:10

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

回答

相关问题