Fixed navbar with animation

Question

I'm trying to make a fixed navbar, that shrinks a bit when you scroll,(something like this: http://themes.muffingroup.com/be/biker/) and i've got the navbar fixed and everything, but I can't get the animation to work properly

Can anyone get me started?

Thanks!

Answer 1

Should be super simple @Christian. Just work with offset() and scrollTop() functions from jQuery lib (if you can).

$(document).ready(function() {
  var NavTop = $('.nav').offset().top;
  var Nav = function() {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > NavTop) { 
      $('.nav').addClass('sticky');
    } else {
      $('.nav').removeClass('sticky'); 
    }
  };

Nav();

  $(window).scroll(function() {
    Nav();
  });
});

With regards animation -- transition should do the trick! Ask if you need example, post your code.