css 属性 position:sticky (粘滞的) 制作导航吸顶效果

一、position:sticky (粘滞的)

1.简介

是 position:relation;和 position:fixed ;的结合体.

表现为当有一个元素设置了 position:sticky的时候，这个元素滚动到距离顶部 0 像素的时候就会自动粘滞到顶部。当然也不一定全部是粘滞到顶部，可以依据情况设置到底部或者左边或者右边。

一般适合用于新闻资讯类，有标题的部分可以粘滞在边缘，内容区域滚动即可。

2.实现原理

受父级元素的制约，就如区域滚动类似，要想起作用父级元素只能设置 overflow：visible

同一个父级元素中设置了 position:sticky 元素，如果定位值相同，那么这些子元素会重叠。如果属于不同的父元素，就会顶替之前的元素。

定位用的bottom，效果和top正好是对立的。设置top粘滞的元素随着往下滚动，是先滚动后固定；而设置bottom粘滞的元素则是先固定，后滚动；

3.实现的HTML结构最好如下类似

<article><section><h4>新闻主题1</h4><content><p>12月2日，有网友爆料称...</p></content><footer>网友评论：...</footer></section><section><h4>新闻主题2</h4><content><p>主题2的主要内容……</p></content><footer>网友评论：...</footer></section>...
</article>

可如下设置position :sticky

article h4,
h4 {position: sticky;top: 0;z-index: 1;
}
content {position: relative;
}
footer {position: sticky;bottom: 50vh;z-index: -1;
}

4.想要看效果的伙伴可以动动小手试一试，蛮有意思的~

css 属性 position:sticky (粘滞的) 制作导航吸顶效果相关推荐

Javascript第五章改变CSS样式节点两种方法，制作导航背景切换效果第十课
第一种方法: 鼠标移出,移入来改变导航的样式第二种方法: 如果改变的效果较多的话代码出现冗余可以有className 代码如下: 效果:
linux 目录的粘滞位,Linux浅谈SUID,SGID,Sticky粘滞位对目录以及文件的相关作用
我们知道在Linux中,root管理员的权限是很大的,能够支持执行绝大部分程序以及命令进而对文件进行相对应的修改,写入.当然这些作用只能体现在root管理员上.但是有一个现象,有些普通用户是可以通过p ...
[css] 说说position:sticky有什么应用场景
[css] 说说position:sticky有什么应用场景吸顶效果个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试 ...
axure9怎么让页面上下滑动_Axure制作：页面上下滑动时的菜单栏悬浮吸顶效果
昆仑女神的故事,sem优化,破产管理人在移动端页面上,用手上下滑时,超过一定向上滑动时,菜单栏能有吸顶效果,如何用axure实现呢? 作者在最近在手机移动端的时候,有一个动画,希望达到效果:用手上下 ...
CSS之定位（粘滞定位）
粘滞定位: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
position sticky 粘黏失效解决办法
position sticky为何会失效没有具体坐标父类元素上有 overflow 属性
css效果之吸顶效果
使用定位实现一般我们使用position:sticky来进行实现他相当于relative和fixed相结合在页面滚动过程中,含有粘性定位的元素到父元素的距离达到一定要求的时候,他的属性就会由re ...
uniApp sticky 吸顶兼容小程序 h5
使用uView的 sticky 完成在h5端的吸顶效果页面滚动到一定距离后元素吸顶 h5吸顶距离为44px. 但是在小程序时默认的吸顶距离是0px因为我的小程序头部导航栏的高度不固定所以这里需要 ...
CSS中position属性（sticky）
position的含义是指定位类型,取值类型可以有:static.relative.absolute.fixed.inherit和sticky,这里sticky是CSS3新发布的一个属性. 1.pos ...
关于css的position属性的描述
下述有关css属性position的属性值的描述,说法错误的是? 牛客网错题集 static:没有定位,元素出现在在正常的流中 fixed:生成绝对定位的元素,相对于父元素进行定位 relative: ...

css 属性 position:sticky (粘滞的) 制作导航吸顶效果

css 属性 position:sticky (粘滞的) 制作导航吸顶效果相关推荐

最新文章

热门文章