How can I animate a sticky navbar

Question

My project has a sticky header after scrolling that uses this script:

$(document).ready(function() {

  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 385) {
      $('#nav').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 386) {
      $('#nav').removeClass('navbar-fixed');
    }
  });
});

How can I animate this so that it looks better?

score 4 · Answer 1 · answered Jan 31 '19 at 19:21

You can animate your fixed nav bar like this:

.navbar-fixed {
    animation: mymove 0.2s ease-in-out;

    @keyframes mymove {
      from {
        top: -20px;
      }
      to {
        top: 0px;
      }
    }
}

Move the nav bar element from -20px to 0px top. The animation lasts for .2s seconds. Hope this help you :)

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

You can use CSS and key frames to animate to the class added and removed. Here below similar questions by using key frames for smooth scrolling smooth scrolling sticky header

edited May 23 '17 at 12:24

Community

1
1

answered Feb 05 '17 at 12:51

Yonas Hailu

853
7
20

score 0 · Accepted Answer · answered Feb 05 '17 at 13:04

0

You can also use jQuery animations. as you are already using jQuery

answered Feb 05 '17 at 13:04

Pranay Kumar

2,139
1
15
15

How can I animate a sticky navbar

3 Answers3