javascript - jQuery offset().top not working properly - Stack Overflow

admin管理员组

文章数量:1430825

I am trying to get a div to stick once it is scrolled out of view.

var jQ = jQuery.noConflict();

jQ(document).ready(function() {

  var win = jQ(window);
  var navTop = jQ('#navbar').offset().top;

  win.scroll(function() {
    jQ('#navbar').toggleClass('sticky', win.scrollTop() > navTop);
  });

});

The problem is that with this code, navTop is not calculated correctly. If I calculate navTop in the scroll function it works as expected but with a horrible flickering effect which I assume is due to recalculating the value many times.

Why does it not calculate the value correctly after document is loaded?

I am trying to get a div to stick once it is scrolled out of view.

var jQ = jQuery.noConflict();

jQ(document).ready(function() {

  var win = jQ(window);
  var navTop = jQ('#navbar').offset().top;

  win.scroll(function() {
    jQ('#navbar').toggleClass('sticky', win.scrollTop() > navTop);
  });

});

The problem is that with this code, navTop is not calculated correctly. If I calculate navTop in the scroll function it works as expected but with a horrible flickering effect which I assume is due to recalculating the value many times.

Why does it not calculate the value correctly after document is loaded?

• javascript
• jquery

Share Improve this question Follow asked Sep 16, 2013 at 3:11 dooversdoovers 8,6851010 gold badges4545 silver badges7373 bronze badges 8

• You could throttle it, check here benalman./projects/jquery-throttle-debounce-plugin. Or check if it's already sticky. Also did you know? jQuery(function($){ //use $ } – elclanrs Commented Sep 16, 2013 at 3:13
• There's no flickering when I try it -> jsfiddle/uGkHx – adeneo Commented Sep 16, 2013 at 3:27
• You should not calculate navTop in the scroll function, because you only need to log the initial position of the element to determine if it has been scrolled out of view. I have checked your code in a fiddle, and it seems to work just fine... jsfiddle/teddyrised/sE4GU – Terry Commented Sep 16, 2013 at 3:27
• @Terry I had a look at the fiddle and yes it works fine. Could it be flickering because I have a lot of styling applied to the navbar? – doovers Commented Sep 16, 2013 at 4:39
• 1 I wouldn't suspect the amount of styling added would have affected the rendering speed of the element in your browser, unless you're on a very slow machine, or on mobile (but anyway, position: fixed is problematic on many mobile browsers so you might want to selectively deactivate it) – Terry Commented Sep 16, 2013 at 4:41

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 2

The fix I used for this problem was to fire another scroll event once to calculate the navTop variable and it works ok now.

Final Code:

var jQ = jQuery.noConflict();

jQ(document).ready(function() {

  var win = jQ(window);
  var navTop;

  jQ(document).one("scroll", function() {

    navTop = jQ('#header').offset().top;

  });

  win.scroll(function() {

    jQ('#navbar').toggleClass('sticky', win.scrollTop() > navTop);

  });

});

本文标签： javascriptjQuery offset()top not working properlyStack Overflow