不使用position:fixed属性,使用什么让盒子固定,其他元素滑动式自己不动
2023-12-13 18:03:28
如果不使用position: fixed
属性,要实现盒子固定、其他元素滑动时自己不动的效果,可以使用position: sticky
属性。
position: sticky
属性将元素在滚动超过特定距离之前为相对定位,之后为固定定位。这个特定距离是通过设置top
、right
、bottom
和left
属性中的某一个或多个来确定的。当页面滚动超过这个距离时,带有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
属性的子级元素会固定在指定位置,而其他元素会继续滚动。
文章来源:https://blog.csdn.net/A_man_of_ideas/article/details/134556157
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!