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，则代码将按预期运行。（好吧，克隆部分有;我不能说其余部分; ^）

Answer 2

嗨，我有完全相同的问题。我发现我需要“调整”JavaScript事件的大小。我添加了这个功能，它对我有用。我希望这有帮助。

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

滚动的粘性标题与CSS问题

2 个答案: