[英]How to hide div when browser resizes to less than 800px
Ok, so I am just starting to learn jquery, and I am in a stump. 好的,所以我才刚刚开始学习jquery,并且我处于一个树桩。 I have this javascript here that I am trying to get working: 我在这里尝试使用此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();
};
});
});
Basically what it is suppose to do is when you scroll down, the element "mobile-nav" will fade in when you scroll down 890px and will stay appeared when you keep scrolling down. 基本上应该做的是向下滚动时,元素“ mobile-nav”在向下滚动890px时会逐渐消失,而在向下滚动时仍会出现。 When you scroll back to the top and pass that specific position, it will fade out. 当您滚动回到顶部并通过该特定位置时,它将消失。 And that part works great but the part that doesn't work is when the browser hits a width less than 800px, the mobile-nav will stay hidden or not displayed. 该部分效果很好,但不起作用的部分是当浏览器的宽度小于800px时,移动导航将保持隐藏或不显示。 But it keeps appearing, and won't stay hidden when the browser resizes to 800px. 但是它会一直显示,并且当浏览器调整为800px时不会隐藏。 Its a small but annoying problem. 这是一个小问题,但很烦人。
Here is the css for the mobile nav for you check as well: 这也是您需要检查的移动导航的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;
}
EDIT: Here is my site I'm working on, currently WIP. 编辑:这是我正在处理的站点,当前在制品。 Here is the link to check out to see what I'm talking about. 这是签出查看我在说什么的链接。 Just scroll down and you will see the mobile nav to your left appear. 只需向下滚动,您将看到左侧出现的移动导航。 http://tronixinteractive.com/jcarter-designs2/ http://tronixinteractive.com/jcarter-designs2/
@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;
}
}
I know you perhaps would prefer a jquery based answer but this could be more easily handled with a media query. 我知道您可能更喜欢基于jquery的答案,但这可以通过媒体查询更轻松地处理。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
CSS 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
}
}
You have a mistake in your code. 您的代码有误。 You hide your div and fadeIn
at scroll. 您可以隐藏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();
};
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.