本博主在一次个人移动端项目中，遇到这么一个需求：希望自己的项目中，头部导航条的效果可以像今日头条那样，横向滚动! 对于这样的效果，在各大移动端项目中几乎是随处可见，为什么呢？ 我们都知道，对于移动端也就是手机上，我们页面的宽度并不像PC端那样大，可以显示很长的导航项，但对于我 ...

这个demo在浏览器模拟的时候会有底部滚动条，当在真机上时，滚动条会消失 ...

应用场景 现在很多移动端的横向导航都是实现了滚动效果，我们先来看几个案例： 今日头条 b站 代码实现 HTML代码： CSS代码： 演示效果： ...

效果：如果滚动了，且不在顶部位置了，则向导航条加一个背景的样式。在顶部时没有背景样式，这样它就是透明的了。 ...

...

...

这个导航条原本是作为插件来用的，这里把他简化了，分为2个PHP文件，做前后端分离的话也可改改，将之分成2个PHP文件、1个html文件和1个css文件，这里还是按不分离的做法来，以下是这两个文件的代码： page.class.php （分页插件） use.php ...

使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~ 首先解决带下拉菜单的导航条 ...