jquery - 导航栏在到达滚动点之前坚持到顶部，直到重新加载页面才会返回

Question

我正在尝试为我正在制作的网页实现一个粘性导航栏。

目前，当我第一次进入任何页面时，导航栏将位于其预期的位置，但一旦我滚动它就会捕捉到顶部并会停留在那里，无论我滚动。 (有时当你滚动到顶部时它会弹回)
预期的行为是在您滚动经过导航栏位置时保持不变。

但是，如果您重新加载页面一两次，它就会按预期开始工作。

代码是用jquery写的:

// JavaScript Document
$(document).ready(function() {
    fixNavbar();
});

//Fixed navbar on scroll past navbar pos
function fixNavbar() {
    var navOffset = $(".navigation").offset().top;

    $(window).scroll(function(){
      var nav = $(".navigation"), scroll = $(window).scrollTop();

      if (scroll >= navOffset) nav.addClass("nav-fix");
      else nav.removeClass("nav-fix");
    });
}

CSS 非常简单:只有一个 position: fixed 的类；

这是正在运行的页面: http://aktersnurra.se
在此先感谢您的帮助!

Answer 1

当您设置滚动事件时，导航栏顶部的图像仍在加载。

这意味着 navOffset 经常会得到不正确的值。

你必须更换你的

$(document).ready(function () {

进入

$(window).on('load', function () {

它会等到整个页面(包括图像)加载完毕。