javascript - 带有 CSS 问题的滚动条上的粘性标题

Question

我已经构建了一个粘性标题，它会在您滚动经过导航区域时出现，并且一切正常，除了当我调整窗口大小时，粘性标题不会自动调整，直到我重新加载页面，即使宽度为 100%，位置固定。每个其他 div 都会自动调整，但这个不会(可能是因为从固定标题克隆它的 javascript？)。因此，我无法弄清楚如何修复的错误是当我在不重新加载的情况下更改窗口大小时使 .floatingHeader 自动调整。关于如何修复这个小的美学错误有什么想法吗？

我的 HTML:

 <div class="persist-area">
    <div class="top">
    <div class="persist-header">
         <div class="head">
            <div>
                <div class="home active" onClick="location.href='index.html'"></div>
                <a href="#">About</a><a href="#">Contact</a>

                <div class="home right"></div><a href="#" id="right">News</a>
            </div>
          </div>
    </div>
    </div>

CSS:

.floatingHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    z-index: 99999;
}

和 Javascript:

function UpdateTableHeaders() {
   $(".persist-area").each(function() {

       var el             = $(this),
           offset         = el.offset(),
           scrollTop      = $(window).scrollTop(),
           floatingHeader = $(".floatingHeader", this)

       if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
           floatingHeader.css({
            "display": "block"
           });
       } else {
           floatingHeader.css({
            "display": "none"
           });      
       };
   });
}

// DOM Ready      
$(function() {

   var clonedHeaderRow;

   $(".persist-area").each(function() {
       clonedHeaderRow = $(".persist-header", this);
       clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", clonedHeaderRow.width())
         .addClass("floatingHeader");

   });

   $(window)
    .scroll(UpdateTableHeaders)
    .trigger("scroll");

});

Answer 1

DOM 就绪事件在浏览器构建 DOM 树时触发(因此所有元素都已被解析并放置在树中的正确位置)。但是此时CSS还没有被解析并应用到DOM中。因此，当您的 JavaScript 执行时，浏览器尚未将 width: 100% 应用到 .persist-header。因此 jQuery 只是默认返回元素的实际宽度(以像素为单位)。该值就是应用于克隆元素的值。

如果您改为等待 window.load，您的代码将按预期工作。 (好吧，克隆部分；我不能说其余的；^)