CODEWITHSUNDEEP
javascriptjquerycss
Josh C
Josh C

Reputation: 3

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. I have this javascript here that I am trying to get working:

$(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. 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. But it keeps appearing, and won't stay hidden when the browser resizes to 800px. Its a small but annoying problem.

Here is the css for the mobile nav for you check as well:

.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/

Upvotes: 0

Views: 972

Answers (3)

David Beech
David Beech

Reputation: 1108

I know you perhaps would prefer a jquery based answer but this could be more easily handled with a media query. 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
     }
}

Upvotes: 2

user4001049
user4001049

Reputation: 

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

Upvotes: 2

Alex
Alex

Reputation: 4774

You have a mistake in your code. You hide your div and fadeIn at scroll.

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

        };
    }); 
});

Upvotes: 0

Related Questions