jquery偏移最高错误值，但在页面调整大小时正确

Question

我想在此页面上实现像左侧导航一样的粘性菜单：http : //getbootstrap.com/2.3.2/scaffolding.html。

我的菜单是一个nav元素position:relative（我也尝试static过），fixed当它到达视口的顶部时就会出现。

这是我的功能：

$(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);收益约1200像素在页面加载时的偏移最高，这是不对的。但是，如果我调整页面大小，该值会更改为 650px 左右，这是正确的顶部偏移量，并且该函数会执行它应该执行的操作。

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

任何帮助解决这个问题将不胜感激！谢谢！！

Answer 1

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

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

当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放置在加载事件的处理程序中。

因此，如果您使用在相关脚本之后加载的样式表，或者页面的布局取决于图像大小或其他内容，则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();
});