Style your navigation bar when scrolled 100px from top

Question

Hi,

If you take a look at this page > http://www.wikihow.com/
You'll notice the navigation bar height will be less greater when scrolled down. I want to apply this to my navigation bar using jQuery. I've found solutions on google, but people say you'll need some plugins. I think this isn't true, am I right?

Thanks.

If you already use jQuery this should be managable without any other plugins — Bluedayz, Aug 25 '14 at 07:28
Correct, you can do this without plugins. A combination of `.scrol()` and `.scrollTop()` should be a good hint to get you started. — Mark Ormesher, Aug 25 '14 at 07:29

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

View my comment in this post, might be useful: Jquery if $(window) scroll down function

and to keep the div of the navigation bar on the top when scrolling you should define it

position: fixed;

edited May 23 '17 at 12:27

Community

1
1

answered Aug 25 '14 at 07:33

Imnotapotato

5,308
13
80
147

score 0 · Accepted Answer · answered Aug 25 '14 at 07:36

Here's the code:

$(document).scroll(function(){
   var scroll = 0;

   if (typeof window.pageYOffset !== 'undefined' ) {
      scroll = window.pageYOffset;
   }

   var d = document.documentElement;
   if (d.clientHeight) {
       scroll = d.scrollTop;
   }
   scroll = document.body.scrollTop;

   if (scroll > 100) {
      // scroll greater than 100px, decrease navigation bar height
   }else{
      // scroll less than 100px,  increase navigation bar height
   }
});

Also, You need to make navigation bar position:fixed

That's it.

Style your navigation bar when scrolled 100px from top

2 Answers2