CODEWITHSUNDEEP
jquerycss
Radu
Radu

Reputation: 626

Animating sticky navigation?

I'm trying to animate a sticky navigation - what I want to do is make it bounce in smoothly. How can I do that?

I have the following .js script: 

    var  mn = $(".menu");
    mns = "menu-scrolled";
    hdr = $('.menu').height() + $('.navigation').height();

    $(window).scroll(function() {
      if( $(this).scrollTop() > hdr ) {
        mn.addClass(mns);
      } else {
        mn.removeClass(mns);
      }
    });

I'm using the following code as a reference: http://codepen.io/Guilh/pen/JLKbn

Upvotes: 0

Views: 51

Answers (1)

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

We can use css animations to animate the top property of the nav:

.main-nav-scrolled {
   -webkit-animation:bounce 0.5s forwards;
}
@-webkit-keyframes bounce {
  from {
    top: -200px;  
  }
  to {
    top: 0; 
  }
}

Whenever the .main-nav-scrolled class is added through javascript the the nav will slide down smoothly.

Keep in mind the browser prefixes too.

example

Upvotes: 1

Related Questions