本博主在一次個人移動端項目中，遇到這么一個需求：希望自己的項目中，頭部導航條的效果可以像今日頭條那樣，橫向滾動! 對於這樣的效果，在各大移動端項目中幾乎是隨處可見，為什么呢？ 我們都知道，對於移動端也就是手機上，我們頁面的寬度並不像PC端那樣大，可以顯示很長的導航項，但對於我 ...

這個demo在瀏覽器模擬的時候會有底部滾動條，當在真機上時，滾動條會消失 ...

應用場景 現在很多移動端的橫向導航都是實現了滾動效果，我們先來看幾個案例： 今日頭條 b站 代碼實現 HTML代碼： CSS代碼： 演示效果： ...

效果：如果滾動了，且不在頂部位置了，則向導航條加一個背景的樣式。在頂部時沒有背景樣式，這樣它就是透明的了。 ...

...

...

這個導航條原本是作為插件來用的，這里把他簡化了，分為2個PHP文件，做前后端分離的話也可改改，將之分成2個PHP文件、1個html文件和1個css文件，這里還是按不分離的做法來，以下是這兩個文件的代碼： page.class.php （分頁插件） use.php ...

使用Bootstrap導航條組件時，如果你的導航條帶有下拉菜單，那么這個帶下拉菜單的導航在點擊時只會浮出下拉菜單，它本身的href屬性會失效，也就是失去了超鏈接功能，這並不是我想要的，我希望導航條的鏈接可以正常打開它的鏈接，但又需要下拉菜單功能，開始折騰~ 首先解決帶下拉菜單的導航條 ...