CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavigation
user2856111
user2856111

Reputation: 205

how to collapse navigation on scroll

Not sure if this question been answered already.

I'm looking to create a navigation that collapses when the user scrolls. I would like something similar to this site http://adcglobal.org/. The navigation becomes smaller as you scroll. I would like to have mine collapse into a menu (similar to a responsive navigation menu except, this is on scroll and not @media to change screen size).

I'm playing around with jQuery and this is what I have so far. The problem with this is that everything disappears as soon as you start scrolling. 

$(window).scroll(function(){
$("ul").hide();
});

I haven't used Javascript/jQuery much to have a good understanding on the library and what can or can't be done.

Upvotes: 0

Views: 207

Answers (1)

Andrew
Andrew

Reputation: 20081

You'll want to use something like:

$("ul").removeClass('top');
$("ul").addClass('scroll');

where in your css class top you will have all the styles set for when it's at the top, and in class scroll you will have all the styles for after you scroll.

You will also likely want check each time the user scrolls the value of $("ul").offSet().top, if it is 0, you want to add the class top back to the element, and remove scroll. You can also check that value to make sure a certain amount has scroll prior to changes the classes, eg:

if ($("ul").offSet().top > 20){ ... }

Upvotes: 1

Related Questions