纯CSS代码制作跟随滚动的顶部导航栏,无JS代码 |
您所在的位置：网站首页 › html网页菜单栏怎么设置 › 纯CSS代码制作跟随滚动的顶部导航栏,无JS代码 |
纯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; }4.总结 优点是简单快捷,平滑无卡顿; 注意事项是此代码只适应顶部导航栏移动需求. 如果有更简单的还望告知,虚心向学. |
【本文地址】
今日新闻 |
推荐新闻 |