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

我已经建立了一个粘性标题，当你滚动浏览导航区域时，它会出现。除了当我调整窗口大小时，粘性标题不会自动调整，直到我重新加载页面，即使宽度为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>

还有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");

});

函数UpdateTableHeaders（）{
$（“.persist area”）.each（函数（）{
var el=$（此），
偏移量=标高偏移量（），
scrollTop=$（窗口）.scrollTop（），
floatingHeader=$（“.floatingHeader”，this）
如果（（scrollTop>offset.top）&&（scrollTop

当浏览器构建了DOM树（因此所有元素都已被解析并放置在树中的正确位置）时，会触发DOM就绪事件。但此时CSS还没有被解析并应用于DOM。因此，当JavaScript执行时，浏览器尚未将

宽度：100%

应用于

.persist标头。因此jQuery只是返回元素的实际宽度（以像素为单位）作为默认值。这个值就是应用于克隆元素的值

如果您等待的是
window.load
，则代码将按预期工作。（好吧，克隆部分；我不能说其余部分；^）
嗨，我也有同样的问题。我发现我需要“调整”JavaScript事件的大小。我添加了这个函数，它为我工作。我希望这有帮助

     $(document).ready(function () {        
      $(window).resize(function() {
      $(".floatingHeader").css("width",$(".persist-header").width());
    });
 });

     $(document).ready(function () {        
      $(window).resize(function() {
      $(".floatingHeader").css("width",$(".persist-header").width());
    });
 });