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

开发 前端
Sticky是CSS3的一个定位属性,它可以让元素在滚动过程中“粘”在屏幕上的某个位置,直到滚动到某个临界点后才会跟随滚动。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; 即可实现此效果:

<div class="header">
<div class="header2">
这是吸附
</div>
</div>
.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啦。

责任编辑:华轩 来源: 今日头条
相关推荐

2023-04-14 16:45:21

CSS前端CSS3

2023-06-20 19:57:13

2023-04-28 15:20:37

JavaScript事件循环

2021-11-03 17:10:37

CSS sticky前端代码

2023-04-13 16:20:48

前端JavaScript语句

2017-11-27 17:09:38

前端Web图像优化

2018-11-26 14:52:12

Web前端跨域

2022-12-12 11:11:05

2011-04-22 09:54:37

CSSjavascript

2019-07-09 10:43:57

JavaScriptWeb前端

2010-09-14 09:18:28

DIVCSS

2013-09-04 14:49:10

移动Web前端开发设计理念

2022-07-19 06:20:47

CSSbackground

2010-09-09 11:16:06

CSS交互

2010-09-09 12:49:58

鼠标悬停tip效果CSS

2022-07-07 08:43:05

HoudiniAPICSS

2023-03-23 09:09:32

前端词云效果

2010-09-14 12:58:41

DIV+CSS圆角

2021-01-19 12:16:10

CSS前端UI

2021-12-27 07:45:30

CSS 技巧烟雾效果
点赞
收藏

51CTO技术栈公众号