滚动页面,实现导航栏固定在顶部(吸顶效果)

页面中有导航栏,当页面滚动超出一定范围时,它会固定在设置好的位置,一般是固定在顶部。

本文有两种方式实现,一种是sticky,兼容不好;另外一种是sticky的解体。。兼容效果万能

1、首先最简单的,是利用position的sticky属性

sticky

页面不动的情况下,它就像 position:relative;

而当页面滚动超出目标区域时,它表现的就像 position:fixed;,会固定在目标位置。

relative(相对定位)是指给元素设置相对于原本位置的定位,元素并不脱离文档流,因此元素原本的位置会被保留,其他的元素位置也不会受到影响。

而fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标并不是body,而是视图(屏幕内的网页窗口)本身。

主要用在对scroll事件的监听上;在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:0);position:sticky这时的效果相当于fixed定位,固定在(top: 0)位置。

特点

1)该元素并不脱离文档流,仍然保留元素原本在文档流中的位置。

2)当元素在容器中被滚动超过指定的偏移值时,元素在容器内固定在指定位置。亦即如果你设置了top: 50px,那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定,不再向上移动。

3)元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素,如果祖先元素都不可以滚动,那么是相对于可视窗口来计算元素的偏移量

用法

position: sticky;
position: -webkit-sticky;    // 兼容 -webkit 内核的浏览器
top: 10px;                          // 必须设一个值,否则不生效

只需要三行代码就能实现吸顶效果

只是目前这个属性并不是W3C推荐的标准,所以目前兼容性还不是很好。

emmm…这一大片红 只要知道sticky兼容性很差就好了。

2、下面利用另外一种万能方式处理

为TA充电
共{{data.count}}人
人已赞赏
温馨提示:
本文最后更新于2021-06-20 05:11:17,某些文章具有时效性,若有错误或已失效,请在下方留言或联系七夏
教程大全

C_Style模板使用说明

2021-6-14 16:00:16

整站源码

Thinkphp内核仿modown虚拟资源素材源码交易下载平台网站源码

2020-5-18 20:29:29

5 条回复 A文章作者 M管理员
  1. 00000

    😁

    • 七夏

      再刷评论拉你进小黑屋

    • 00000

      我的会员呢!还没还给我😭

  2. 00000

    66666666666

  3. 00000

    666666666

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索