小編給大家分享一下當position:sticky遇到bootstrap浮動布局時候的注意事項，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10余年的安國網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整安國建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“安國網(wǎng)站設(shè)計”,“安國網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

當?shù)谝淮谓佑|到 position:sticky 這個屬性，我就意識到之前的不少 js 場景可以用這個 css 屬性去改寫。譬如 網(wǎng)站 右側(cè)的不少廣告，滾動上去后需要 fixed，完全就是 sticky 的應用啊。

今天要說的是 文章詳情頁 右側(cè)的目錄欄，當頁面下滑的時候，它也會固定到頁面頂部，之前是用 js 去監(jiān)聽 scroll 事件，然后根據(jù)位置進行判斷，toggle fixed 的方案，出于一些原因，決定對它用 sticky 去重寫。

幾下就寫完了，去掉滾動事件監(jiān)聽，然后將菜單元素 .post-nav 加上 position:sticky; top:0 樣式，但是，不起效！

wtf! 百思不得其解，我開始搜索原因。在 so 搜到了 這個，說到可能是元素的父級元素有對 overflow 屬性進行處理，比如加了什么 overflow:hidden 啥的，但是看了下，并沒有這種情況。

然后我猜想會不會是 bootstrap 布局的問題（事實上確實有關(guān)系），寫下 demo：

  
  
  



  
    content

    
      menu

      ad

      others

    

  

但是沒問題，突然想到網(wǎng)站用的 bootstrap 版本是 3.x，然后改成 3.3.7 的版本，這時候問題就出來了。

這時候問題就比較好定位了，4.x 用的是 flex 布局，而 3.x 還是 float 浮動布局，問題應該是出在這里了。

最終代碼（參考 這個 issue)：

  
  
  



  
    content

    
      menu

      ad

      others

    

  

對應到開始的問題上，因為 menu 是屬于 .col-md-3 元素的，所以右邊的 .col-md-3 需要和左邊的 .col-md-9 保持高度一致即可，加上這行代碼：

$('.side').height($('.main').height())

因為左邊的內(nèi)容區(qū)域有圖片的延遲加載，所以這行代碼需要持續(xù)執(zhí)行：

$(window).scroll(function() { 
 $('.side').height($('.main').height())

 // other code 
 // ...

})

以上是“當position:sticky遇到bootstrap浮動布局時候的注意事項”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！