不使用position:fixed属性,使用什么让盒子固定,其他元素滑动式自己不动

如果不使用position: fixed属性,要实现盒子固定、其他元素滑动时自己不动的效果,可以使用position: sticky属性。

position: sticky属性将元素在滚动超过特定距离之前为相对定位,之后为固定定位。这个特定距离是通过设置toprightbottomleft属性中的某一个或多个来确定的。当页面滚动超过这个距离时,带有position: sticky属性的元素会固定在指定位置,而其他元素会继续滚动。

下面是一个示例,演示如何使用position: sticky属性实现盒子固定、其他元素滑动时自己不动的效果:

<template>  
  <div style="height: 300px; border: 1px solid #ccc;">  
    <div style="position: sticky; top: 50px; width: 100px; height: 100px; background-color: red;"></div>  
    <!-- 其他元素 -->  
  </div>  
</template>

在上面的示例中,父级元素没有设置具体的position属性,而子级元素设置了position: sticky属性,并通过top属性设置了固定位置。当页面滚动超过50px时,带有position: sticky属性的子级元素会固定在指定位置,而其他元素会继续滚动。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值