滾動帶有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 ready事件（因此，所有元素都已解析並放置在樹中的正確位置）。 但是目前，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());
    });
 });