Add or remove class on vertical scroll

A tutorial to show how use JavaScript and CSS to change appearance of when scrolling down on the website.

I often use JavaScript to change appearance of <header> when scrolling down on the website. I like to make it smaller after certain pixel amount. The best way to do that is change a class name for <header> element with JavaScript. You need to load JQuery before this script to make it work.

<script>
$(window).scroll(function() {
   if ($(this).scrollTop() > 150){
      $('header').addClass("small");
   } else {
      $('header').removeClass("small");
   }
});
</script>

This code calls the .scroll() JavaScript event and then use .scrollTop() to check if there are more than 150 pixels from top of the browser. If there is more, add a new class name small to the header element. If there are less pixels than 150, remove the class name from the element.

Then just add extra CSS styles for header.small.

header { height: 50px }
header .menu a { height: 1.2em }
.small { height: 25px }
.small .menu a { height: 1em }

So simple but still so powerful. :)