Q:

Navbar fixed top pos. absolute change to relative when scroll

I want to change navbar fixed top position from absolute to relative when scrolls more than 600px.
I have this code:
   if (scroll >= 700) {
    $(".navbar-fixed-top").addClass("navbar-scroll");
  } else {
    $(".navbar-fixed-top").removeClass("navbar-scroll");
   }
});

this is working, but I tried to change it to animate( for transition )
and I did this:
 if (scroll >= 700) {
                $(".navbar-fixed-top").animate ({
        position: 'fixed'
        }, "slow"); 
} else {
                $(".navbar-fixed-top").animate ({
        position: 'absolute'
        }, "slow");
 }
});

and this isnt working, why?

A:

Seeing as how you can't animate the position property, just use absolute positioning and animate the top value instead. 
Working Example
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    if (scroll >= 700) {
        $(".navbar-fixed-top").animate({
            top: scroll + 10
        }, 50);
    } else {
        $(".navbar-fixed-top").animate({
            top: '10px'
        },50);
    }
});

