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

11 篇文章 0 订阅
6 篇文章 0 订阅

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、下面利用另外一种万能方式处理

说到了sticky粘性定位的原理 是结合了relative和fixed的特点
既然浏览器对sticky支持不友好,那就用代码把他俩动态切换达到结合的效果(relative和fixed是不分浏览器的)
思路:
前提时需要监听scroll事件
1)滚动条不动时,是静态相对定位状态relative
2)当页面滚动超出设置距离时,js改变样式属性 切换定位状态变成fixed,同时再给top设置一个值

css部分
// 滚动条不动时
.box{
position: relative;
height: 80px;
width: 100%;
z-index: 999;
}
// 监听到滚动条开始滚动后的样式
.box-active{
position: fixed;
top: 0;
}

js部分

// 监听事件
 window.addEventListener('scroll', function(){
 	let t = $('body, html').scrollTop();   // 目前监听的是整个body的滚动条距离
 	if(t>0){
		$('.box').addClass('box-active')
	}else{
		$('.box').removeClass('box-active')
	}
 })

这样就可以兼容所有浏览器了,也不是很麻烦,效果两种是一样的

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值