当前位置:清晨 » 站长笔记 » 网站头部随滚动条浮动功能实现(非JS)

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

发布日期:2014年8月20日 10:08:03 点击量: 2,380

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

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

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





活动测试文件



浮动内容

其它内容

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

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


关键词:

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

老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725

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

  1. 1980jz说道:

    第一次来这,留个脚印

发表评论

电子邮件地址不会被公开。 必填项已用*标注