网站头部随滚动条浮动功能实现(非JS)

经常看到一些网站,头部随滚动条浮动效果,
在这里影子分享一下,无需JS实现头部随滚动条浮动效果的方法:
这里我们使用div层的技巧配合position的值 fixed来共同实现。
先看一下 position的值 fixed的介绍:
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

我们可以利用绝对定位功能,相对浏览器顶部进行定位,保持一定的距离,即使窗口变化,也可以保持相对位置不变,而网站内容可以正常变动。
看下下面这个例子:
代码如下:





活动测试文件





浮动内容

其它内容

源代码:请直接查看源代码即可!

在例子中,我们利用一个盒子包含两个盒子,外部的盒子css设置
padding-top: 86px;
内边框,浮动的盒子,设置相对位置及层的高度
position: fixed;
z-index: 100;
以此来实现浮动层随滚动条浮动效果,根据此,可以实现更多功能。

“网站头部随滚动条浮动功能实现(非JS)”的2个回复

评论已关闭。