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

Answer 2

您可以通过在文档中设置一个显示测试元素的样式标签来检查您的 CSS 是否已加载，然后在您的 CSS 文件中覆盖它以隐藏它。然后，您可以通过检查此元素来检查页面的状态。比如……

在您的 HTML 中：

<div id="loaded-check" style="display:block; height:10px; width:10px; position:fixed;"></div>

在您的 CSS 中：

#loaded-check { display:none; }

在您的 jQuery 脚本中：

var startUp = function() {
    var cssLoaded = $('#loaded-check').is(':visible');
    if (cssLoaded) {
        $('#loaded-check').remove();
        doOtherStuff()
    }
    else {
        setTimeout(function() {
            startUp();
        }, 10);
    }
}

var doOtherStuff = function () {
    //bind your sticky menu and any other functions reliant on DOM load here
}