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

$(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

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/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

• javascript
• jquery
• html
• css

1 Answer 1

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/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");
     }
 });