jQuery - Fixed navigation menu with variable height according to the scroll

Question

I'm fairly new in jQuery and it's been a few days that I'm trying to make a top-fixed navigation menu in my page with variable height according to the scroll, but so far it has been a struggle to figure out how this works. I managed to kinda simulate the effect with just CSS Transition but it's not what I want.

Here a perfect exemple of what I'm trying to accomplish: www.bulo.com and here: http://d.pr/i/fqaB

I examined the code of Bulo.com, and find it really hard to comprehend, since the part that apparently make it all works, it's inside jQuery.js and it's all compressed with no spaces or linebreaks whatsoever, making me go bananas.

I stripped down what I thought it's important:

HTML:

<header class="mod-header" data-target-padding="40">
  <div class="container">
    <nav class="navigation">
      <ul>
          <li class="nav-item">
            <a href="collections.html">Collections</a>
          </li>
          <li class="nav-item">
            <a href="products.html">Products</a>
          </li>
          <li class="nav-item">
            <a href="for-sale.html">For sale</a>
          </li>
      </ul>
    </nav>
  </div>
</header>

CSS:

.mod-header {
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
z-index: 901;
}
.mod-header .navigation {
text-align: center;
}
.mod-header .navigation ul {
display: inline-block;
margin: 0;
overflow: visible;
padding: 0;
text-align: center;
}
.mod-header .navigation li {
display: block;
float: left;
height: 18px;
margin: 0;
overflow: visible;
padding: 64px 0;
position: relative;
z-index: 910;
}
.mod-header .navigation li a {
color: #171617;
display: inline-block;
font-family: 'Droid Sans',sans-serif;
font-size: 18px;
height: 18px;
margin: 0 20px;
text-align: center;
text-decoration: none;
}
.mod-header.mod-header-fixed {
left: 0;
margin: 0;
position: fixed;
top: 0;
width: 100%;
}

Not going to post the jquery.js files because it's freaking gigantic, but you can easily see it for yourself with Firebug or Inspect Element in Safari.

So, can anyone explain it to me?

Thanks in advance.

Answer 1

You would just need to add a class mod-header-fixed to that navigation bar just when the page 70px scrolled down and then remove it when the page is scrolled back.

The following jQuery example would easily catch that kind of event and do what you want:

$(document).ready(function(){
     $(window).scroll(function(){
         if ($(window).scrollTop() > 70){
            $(".navigation").addClass("mod-header-fixed");
         } else if ($(window).scrollTop() < 70) {
            $(".navigation").removeClass("mod-header-fixed");
         }
    });
});

jsFiddle example

Read more about .scrollTop() method on jQuery API Documentation .

EDIT 1:

You said that you can't read compressed code? Please, just copy/paste the code you can't read in to JavaScript Beautifier and get read-friendly version of it!

EDIT 2:

If you want the object to change .height() you could manipulate padding property using .animate() method:

$(document).ready(function(){
     $(window).scroll(function(){
         if ($(window).scrollTop() > 70){
             $(".navigation").addClass("mod-header-fixed");
             $(".mod-header .navigation li").stop().animate({ 
                padding: "45px 0"
             }, 600 );
             $(".mod-header .navigation li").stop().animate({ 
                padding: "45px 0"
             }, 600 );
         } else if ($(window).scrollTop() < 70) {
             $(".navigation").removeClass("mod-header-fixed");
             $(".mod-header .navigation li").stop().animate({ 
                padding: "15px 0"
             }, 600 );
             $(".mod-header .navigation li").stop().animate({ 
                padding: "15px 0"
             }, 600 );
         }
     });
 });

jsFiddle example