CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mattia
mattia

Reputation: 621

jQuery position DIV fixed on scroll

I tried to fixed an element on top, when this element touch the top of the window, when the user scroll down. On scroll down everything works (added a class with the fixed position), but when I scroll up doesn't work. but i don't understand why :( i created a jsfiddle with this code: http://jsfiddle.net/8h4knr9r/

$(window).scroll(function () {
     var distance = $('#navigation-sections').offset().top;

     if ($(window).scrollTop() >= $('#navigation-sections').offset().top) {
         $('#navigation-sections').addClass("affix");

     } else {
         $('#navigation-sections').removeClass("affix");
     }
 });

thanks

Upvotes: 2

Views: 9606

Answers (1)

Donal
Donal

Reputation: 32763

You need to store the initial distance outside the scroll function - otherwise it will get recalculated every scroll. Here is the working fiddle: http://jsfiddle.net/donal/8h4knr9r/5/

The JS should look like this:

var distance = $('#navigation-sections').offset().top; 

$(window).scroll(function () {

     if ($(window).scrollTop() >= distance) {
         $('#navigation-sections').addClass("affix");

     } else {
         $('#navigation-sections').removeClass("affix");
     }
 });

Upvotes: 5

Related Questions