Javascript jQuery offset().top无法正常工作

Javascript jQuery offset().top无法正常工作,javascript,jquery,Javascript,Jquery,我正试图让一个div在它被滚动出视图后保持不变 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)

我正试图让一个div在它被滚动出视图后保持不变

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

});
问题是,使用此代码时,navTop计算不正确。如果我在scroll函数中计算navTop,它会按预期工作,但会产生可怕的闪烁效果,我认为这是由于多次重新计算该值造成的


为什么加载文档后它不能正确计算值?

我用于解决此问题的修复方法是触发另一次滚动事件来计算navTop变量,现在它工作正常

最终代码:

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);

  });

});

你可以控制它,检查这里。或者检查它是否已经粘了。你也知道吗<代码>jQuery(函数($){//使用$}我尝试时没有闪烁->你不应该在scroll函数中计算navTop,因为你只需要记录元素的初始位置就可以确定它是否被滚动到了视图之外。我在小提琴中检查了你的代码,它似乎工作得很好…@Terry我看了小提琴,是的,它工作得很好。Cou它是否会闪烁,因为我在导航栏上应用了很多样式?我不会怀疑添加的样式数量会影响浏览器中元素的渲染速度,除非您使用的是非常慢的机器或移动设备(但无论如何,
position:fixed
在许多移动浏览器上都有问题,因此您可能希望有选择地停用它)