CODEWITHSUNDEEP
jquerycssmenusticky
eozzy
eozzy

Reputation: 68650

Sticky header with transition animation

$(function () {
    $('#nav').data('size', 'big');
});

$(window).scroll(function () {
    if ($(document).scrollTop() > 0) {
        if ($('#nav').data('size') == 'big') {
            $('#nav').data('size', 'small');
            $('#nav').stop().addClass('nav-min');
        }
    } else {
        if ($('#nav').data('size') == 'small') {
            $('#nav').data('size', 'big');
            $('#nav').stop().removeClass('nav-min');
        }
    }
});

.. works perfectly, however the menu jumps from normal to min, is it possible to somehow animate it so the transition looks smooth?

Thanks

Upvotes: 2

Views: 709

Answers (1)

isherwood
isherwood

Reputation: 61056

To animate and change classes...

$('#nav').stop().animate({...}, 999, function() {
    $('#nav').addClass('nav-min');
}):

Upvotes: 3

Related Questions