如何創建可滾動的水平導航菜單但在用戶窗口向下滾動時顯示

Question

我想創建一個必須水平滾動的導航菜單。 但是當用戶在瀏覽器（移動+桌面）中向下滾動窗口時，應該顯示此導航。

我已經嘗試了這段代碼，以便在滾動底部后顯示導航菜單，但它的項目不會水平滾動。 刪除位置時：固定然后它的項目水平滾動。

因此，當用戶向下滾動窗口時，我想要這兩個功能可滾動導航水平+顯示導航菜單欄。

 window.onscroll = function() { scrollFunction() }; function scrollFunction() { if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) { document.getElementById("navigation").style.top = "0"; } else { document.getElementById("navigation").style.top = "-150px"; } }

 #navigation { top: -50px; position: fixed; } .nav-header { background: #002347; color: #ffffff; } .nav-header a { color: #ffffff; } .nav-header nav { width: 100%; } .itemlist { padding: 6px 12px; } .itemlist:not(:last-child) { border-right: 1px solid #ece4e4; } .itemlist { font-size: 17px; font-weight: bold; } .itemlist, .center { cursor: pointer; vertical-align: middle; display: inline-block; } .scrolltab { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } .scrolltab::-webkit-scrollbar { display: none; }

 <div id="navigation" class="nav-header"> <nav class="center scrolltab"> <span class="itemlist"> About us </span> <span class="itemlist">Web Solution</span> <span class="itemlist">Web Application</span> <span class="itemlist">Scripting Language</span> <span class="itemlist">Andriod Application</span> <span class="itemlist">Contact</span> </nav> </div> <div style="padding:15px 15px 2500px;font-size:30px"> <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>

Answer 1

要使導航欄水平滾動，您需要為包含元素指定寬度。 即添加

#navigation {
  width:100%;
}

還有，你有

.scrolltab::-webkit-scrollbar {
    display: none;
}

我不確定您是否出於某種原因需要這個，但至少在 Microsoft Edge 和 Chrome 上它會導致滾動條不出現。 刪除它會使菜單可滾動。