CODEWITHSUNDEEP
jquery
Adok Achar
Adok Achar

Reputation: 58

Smooth Scrolling Nav bar

I'm planning to have a nav bar that remains at a fixed position until the nav bar reaches the top of the browser window while scrolling.

I was able to achieve this with jquery but it isn't smooth

      $(window).scroll(function()
     {     var box = document.getElementById('box'), 
           scroll = $(window).scrollTop();     
           if (scroll <= 598) { $("#box").css("top",598); }  
          else { $("#box").css("top",scroll); }
   });

How can the motion be smooth like here?

  1. reference 1

I end up getting something like this:

Forgive me if I'm not explaining the problem in detail.

Upvotes: 0

Views: 591

Answers (1)

Mike Robinson
Mike Robinson

Reputation: 25159

You're pretty close. IGN just listens for when you exceed the scroll marker and switches the bar to position fixed. That way you browser only has to handle one scroll event, then CSS handles the rest.

If you open firebug / chrome dev tools and watch the element, you can actually see the style change from position: absolute to position: fixed at the marker.

Upvotes: 1

Related Questions