position:sticky解决position:fixed在窗口宽度过窄时显示不全

  • 在做吸顶导航时,常常会用到position:fixed,以便让导航栏一直固定在页面上方。
// 常用的position:fixed 相关css
.nav {
	width: 100%;
    height: 80px;
    position: fixed;
    left: 0;
    top: 0;
}
  • 然而盒子使用position:fixed有个问题:在窗口很窄,而盒子宽度比较大时,会看不到盒子中被遮挡的内容。即使拖动了滚动条,也看不到盒子后面的内容
  • 原因:position:fixed是相对于视口viewport定位的,在设置了left:0后,盒子左边与视口的距离就永远是0,即使拖动滚动条,盒子也会一起右移,因此始终看不到被遮挡的部分
  • 想解决这个问题,其实需要把position:fixed的定位改成相对父元素定位, 一听相对父元素定位, 这不就是子绝父相干的事情吗!
  • 但是子绝父相就做不到吸顶导航了,当父元素高度较高,滚动条往下拖的话,子元素就看不到了
  • 其实,还有一个定位属性position: sticky就可以做到这一点!
  • 看一下mdn的解释:元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block(最近块级祖先 nearest block-level ancestor),包括 table-related 元素,基于 top、right、bottom 和 left 的值进行偏移。偏移值不会影响任何其他元素的位置。 该值总是创建一个新的层叠上下文(stacking context)。注意,一个 sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的 overflow 是 hidden、scroll、auto 或 overlay 时),即便这个祖先不是最近的真实可滚动祖先。
  • 说人话版本:position: sticky相当于相对定位和固定定位的混合。比如,我把上面的定位改成如下:
.nav {
	width: 100%;
    height: 80px;
    position: sticky;
    left: 0;
    top: 0;
}
  • 那么,在最少指定了top, right, bottom 或 left 四个阈值其中之一时,position: sticky才能生效,否则他就和postions:relative一样。那么生效是什么样的?以top:0举例。当视口viewport的顶部与nav距离大于0之前,nav就是普通的postions:relative;当视口viewport的顶部与nav距离小于0时,nav就变成了position: fixed,会固定在距离顶部0px的位置
  • 需要注意的是,position: sticky不能超出父级容器的区域,当滚动到父级容器已经没有地方给他固定了,那么position: sticky就会开始跟随父级一起滚动了
  • 那么,回到我们的目标,我们为什么设置了left: 0;,再拖动横向滚动条时,导航栏会跟着滚动呢?原因就是position: sticky不能超出父级容器的区域!我们设置了width: 100%;后,其宽度已然是父级的100%,当我们拖动滚动条,position: sticky受限于父级已经没有位置给他固定了,只能跟着父级一起滚动了
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值