javascript - jquery 偏移顶部错误值，但在页面调整大小时正确

Question

我想实现一个像本页左侧导航一样的粘性菜单:http://getbootstrap.com/2.3.2/scaffolding.html .

我的菜单是一个 nav 元素，带有 position:relative(我也试过 static)，它会 fixed 当它到达视口(viewport)顶部时。

这是我的功能:

$(document).ready(function() {
    function stickyNav() {
        var elementPosition = $('nav').offset();
        console.log(elementPosition);

        $(window).scroll(function(){
            if($(window).scrollTop() > elementPosition.top){
                $('nav').addClass("sticky");
            } else {
                $('nav').removeClass("sticky");
            }
        });
    }
    stickyNav();
}); //document ready

console.log(elementPosition); 在页面加载时返回大约 1200px 的偏移顶部，这是错误的。但是，如果我调整页面大小，该值会更改为大约 650 像素，这是正确的顶部偏移量，并且该函数会执行它应该执行的操作。

我环顾四周，发现 offsetp top 在隐藏元素上时可能是错误的，或者它有边距问题，但实际上我这里没有任何复杂的结构，只有一个可见的 nav 元素。

如果能帮助解决这个问题，我们将不胜感激!谢谢!!

Answer 1

jQuery(document).ready 处理程序在 DOM 准备就绪时发生。不是在页面完全呈现时。

https://api.jquery.com/ready/

When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

因此，如果您使用的样式表是在有问题的脚本之后加载的，或者页面布局取决于图像大小或其他内容，则 ready 事件将在页面未处于最终渲染状态。

您可以通过以下方式解决此问题:

1. 确保在脚本之前包含所有样式表
2. 确保 CSS 更健壮，并且不太依赖于内容大小(例如图像)
3. 或者，您可以在窗口 load 事件上执行此操作。

编辑:

如果你想让你的脚本依赖于多个异步事件(比如 loadCSS 库)，使用这个:

var docReady = jQuery.Deferred();
var stylesheet = loadCSS( "path/to/mystylesheet.css" );
var cssReady = jQuery.Deferred();
onloadCSS( stylesheet, function() {
    cssReady.resolve();
});
jQuery(document).ready(function($) {
    docReady.resolve($);
});
jQuery.when(docReady, cssReady).then(function($) {
    //define stickyNav

    stickyNav();
});