與CSS問題滾動時的粘性標題

我已經構建了一個粘滯的標題，當您滾動瀏覽區域時會出現，並且除非當我調整窗口大小時粘貼標題不會自動調整，直到我重新加載頁面，即使寬度是100％並且位置是固定的。每個其他div自動調整，但不是這一個（也許是因爲從固定頭文件克隆它的JavaScript？）。所以，我無法弄清楚如何解決的錯誤是讓我自動調整.floatingHeader，當我更改窗口大小而不重新加載時自動調整。任何想法如何解決這個小美學錯誤？與CSS問題滾動時的粘性標題

我的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"); 

});

來源

2014-01-11 user2250471

當瀏覽器已經構建的DOM樹的DOM就緒事件觸發（使所有元素都被解析並放置在樹中的正確位置）。但是目前這個CSS還沒有被解析並應用到DOM。因此，當您的JavaScript執行時，瀏覽器尚未將width: 100%應用於.persist-header。因此，jQuery只是返回元素的實際寬度（以像素爲單位）作爲默認值。這個值就是應用於克隆元素的值。

如果您等待window.load，您的代碼將按預期工作。（好吧，克隆部分;我不能說其餘的; ^）

來源

2014-01-11 23:17:25

嗨，我有完全相同的問題。我發現我需要「調整」JavaScript事件。我添加了這個功能，它爲我工作。我希望這有幫助。

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

來源

2014-02-05 16:07:39 RRdesign

與CSS問題滾動時的粘性標題

回答

相關問題