如何讓 fixed 定位的導航條可橫向滾動?

丁香園F2E發表於2019-01-04

什麼是 fixed 定位, 可橫向滾動的導航條

一種常見的頁面導航條的設計為頁面向下滾動到一定的距離時讓導航條固定在頂端, Insight 的宣傳首頁就是這樣處理的:

定寬的頁面, 非響應式的頁面會讓使用者縮小瀏覽器寬度的時候可橫向滾動:

帶來的問題

很多網站的導航條都是這樣處理的, 但是這裡會帶來一個小小的問題, 在使用者下拉頁面出現置頂導航條, 並且瀏覽器的寬度不夠時, fixed 定位的導航條將不能正確的跟隨滾動條進行滾動.

請注意觀察導航條, 其無法跟隨水平滾動條滾動:

處理方案

讓導航條自適應寬度

這種方案一般用在導航條上沒有很多元素, 即便導航條自適應寬度也不會導致導航條樣式錯亂. 這裡不適用.

漸進增強 - 採用 sticky 定位

為了簡潔, 沒有處理下拉的情況下置頂導航條

用到的瀏覽器特性

sticky 定位可以做到讓元素保持在容器的視口中, 並且是可以跟隨水平滾動條進行滾動, 所以在支援 sticky 的瀏覽器中可以達到想要的效果, 不支援的瀏覽器就讓它還是使用 fixed 定位或者是讓其排版錯亂吧?.

實現程式碼如下:

<header class="d-flex flex-items-center">朱自清 - 背影</header>
<main>我說道，“爸爸，你走吧。”他望車外看了看，說，“我買幾個橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮;他肥胖的身子向左微傾，顯出努力的樣子。這時我看見他的背影，我的淚很快地流下來了。我趕緊拭乾了淚，怕他看見，也怕別人看見。我再向外看時，他已抱了硃紅的橘子望回走了。過鐵道時，他先將橘子散放在地上，自己慢慢爬下，再抱起橘子走。到這邊時，我趕緊去攙他。他和我走到車上，將橘子一股腦兒放在我的皮大衣上。於是撲撲衣上的泥土，心裡很輕鬆似的，過一會說，“我走了;到那邊來信!”我望著他走出去。他走了幾步，回過頭看見我，說，“進去吧，裡邊沒人。”等他的背影混入來來往往的人裡，再找不著了，我便進來坐下，我的眼淚又來了。</main>
複製程式碼
body {
  width: 1200px;
  color: white;
}
header {
  /* 預設可以採用 fixed 定位 */
  position: fixed;
  width: 1200px;
  top: 0;
  height: 40px;
  background: linear-gradient(90deg, blue, red);
}
main {
  /* 注意處理間距 marin-top */
  margin-top: 40px;
  height: 3000px;
  background-color: green;
}

/**
 * 在現代瀏覽器之中採用 sticky 定位
 */
@supports (position: sticky) {
  header {
    position: sticky;
    top: 0;
  }
  header + main {
    margin-top: 0;
  }
}
複製程式碼

你可以看下 codepen 上面的示例:

See the Pen MZQdyV by 蔣璇 (@aizhizhi) on CodePen.

或者選擇去 insight 的 宣傳頁面 看下實際的效果(需要在 PC 端, 調整瀏覽器寬度,讓其出現水平滾動條)

相關文章