Web前端tips：CSS之Sticky粘滞效果

Sticky介绍

Sticky是CSS3的一个定位属性，它可以让元素在滚动过程中“粘”在屏幕上的某个位置，直到滚动到某个临界点后才会跟随滚动。Sticky定位可以使得页面更具交互性和易用性，也提高了页面的可读性。 Sticky定位可以通过以下代码实现：

按需开发可以根据自己的需求进行定制，网站设计、成都网站建设构思过程中功能建设理应排到主要部位公司网站设计、成都网站建设的运用实际效果公司网站制作网站建立与制做的实际意义

position: sticky;top: 0;

其中，top属性定义了元素“粘”在屏幕上的位置。当元素到达指定位置时，它将会变成固定定位，直到滚动到指定位置后才会解除固定定位。 Sticky定位的特点：

1. 当元素被滚动到达指定位置时，它会变成固定定位，直到滚动到指定位置后才会解除固定定位。
2. Sticky定位可以让元素在滚动过程中保持在屏幕上的某个位置，这提高了页面的可读性和易用性。
3. Sticky定位可以和其他定位属性（如top、bottom、left、right）结合使用，从而实现更加复杂的布局效果。

实现一个高度能自动变小的吸附需求

场景：客户需要这样一个动态效果，就是网站的顶部导航栏在未触及到页面顶部时，它的高度为 100px ，随着页面向下滚动，顶部导航栏在触及页面顶部时，保持在页面顶部显示，当页面继续向下滚动时，顶部导航栏导航栏随滚动减少高度，直到高度减少到50px时不再继续减少。在以前：我们基本使用js来实现此效果，基本原理就是监听滚动条，计算滚动距离，动态赋值高度和样式。在现在：我们直接使用 position: sticky; 即可实现此效果：

    

    这是吸附
    

.header {
    position: sticky;
    top: -50px;
    width: 100%;
    height: 100px;
    background-color: #f0f;
}
.header2 {
    position: sticky;
    top: 0;
    background-color: rgba(25,25,25,.5);
    height: 50px;
}

是不是很简单就能实现此效果啦，相比js一大堆逻辑代码， position: sticky; 可简洁的不是一点两点啦。

兼容性

可见，对现代浏览器，兼容还是不错哒，当然老项目ie浏览器还是只有乖乖的写js啦。

网站标题：Web前端tips：CSS之Sticky粘滞效果
文章地址：http://www.shufengxianlan.com/qtweb/news48/38548.html

成都网站建设公司_创新互联，为您提供静态网站、软件开发、建站公司、ChatGPT、关键词优化、小程序开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联