当前位置:首页 > 站长笔记 > 正文
运行天数:3001 天 最后更新:2020-7-10

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

用手机或者平板电脑扫描应用扫描本二维码,可以在手机浏览器继续浏览,也可以分享给你的联系人。

2014年08月20日 | 作者: 影子 | 分类: 站长笔记 | 点击量: 3,123

WDJA网站内容管理系统,免费开源可商用 点我获取,简单好用的PHP版CMS

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

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





活动测试文件



浮动内容

其它内容

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

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



手机扫码浏览本文


关键词:

本文网址:https://www.menglei.net/1652/,转载请以链接形式注明出处,谢谢合作!

*本站部分内容转载自其他媒体,版权归其所有。如若内容或图片侵犯您的权益,请与本站联系,我们将在24小时内处理完毕。

作者:清晨@深圳网站建设专家. | 清晨,领先的深圳网站优化品牌。

交流QQ号:925474725 邮件支持:shadoweb@qq.com