可能是最简单的滚动导航栏(只有css代码,不用js)

以有妖气为例,让顶部导航栏固定滚动在页面上.

1.效果如下:

初始化↓↓↓

滚动效果↓↓↓

2.实现思路

--需求:  顶部只有一个且只需要移动一个导航栏

实现思路:  给导航栏添加固定定位(fixed),这时候脱离了标准流浮动起来了;

--问题:  底下的盒子会往上跑占据导航栏原来的位置

解决办法:  给导航栏下面的盒子添加顶部内边距(padding-top),值等于导航栏的高度.

3.css代码

.top-nav {
    /*顶部导航栏*/
    background: rgba(244, 245, 246, .95);
    position: fixed;
    width: 100%;
    height: 100px;
    z-index: 10;
}

.banner {
    /*滚动广告幅*/
    padding-top: 100px;
    margin: 0 auto;
    width: 1920px;
    height: 711px;
    position: relative;
}

大功告成, 优点:简单快捷,平滑毫无无卡顿; 缺点:只适应顶部只有 一个导航栏移动需求.