Christian Van Voorst Christian Van Voorst - 1 year ago 120
CSS Question

Fixed navbar with animation

I'm trying to make a fixed navbar, that shrinks a bit when you scroll,(something like this: and i've got the navbar fixed and everything, but I can't get the animation to work properly

Can anyone get me started?


Answer Source

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) { 
    } else {


  $(window).scroll(function() {

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download