CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jurg Verhoeven
Jurg Verhoeven

Reputation: 15

How can I animate a sticky navbar

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?

Upvotes: 1

Views: 3930

Answers (3)

Chiaradiaz
Chiaradiaz

Reputation: 51

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 :)

Upvotes: 4

Pranay Kumar
Pranay Kumar

Reputation: 2267

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

Upvotes: 0

Yonas Hailu
Yonas Hailu

Reputation: 853

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

Upvotes: 0

Related Questions