首页>建站相关>css中的sticky定位

css中的sticky定位

css中sticky定位是个很有趣的定位方式,在不满足限定条件时,sticky元素跟随大部队上下滚动,表现的像个普通元素,一旦达到了限定条件,它会呈现出类似fixed定位的效果,一下子变成人群中最靓的崽。虽然也可以通过利用js代码监控页面滚动事件来达到类似的效果,但有谁会拒绝仅用两行css代码实现一个动态的效果呢:

#sticky-nav{
    position: sticky;
    top: 20px;
}

sticky的使用条件

sticky元素有点类似轨道中的滑块,其轨道就是sticky元素的父元素。sticky元素的伸缩范围局限于其父元素所提供的空间长短,当sticky元素到达限定位置时,由于父元素同时在跟随文档流上行,表现在页面上的效果就是sticky元素进入相对静止的状态,实际上这是一个父元素底部预留空间逐渐收窄的过程,直到sticky元素滑动到父元素底部,轨道空间走完,元素就会被父元素带走。

css_position_sticky

所以想要让sticky元素正常工作,我们需要为其提供一条轨道(父元素具备足够的长度),除此之外,我们还需要一个限制条件,指定元素到达某个位置时触发动作,这个条件可以是top、bottom、left、right4个值之一。如果有必要的话,同时指定两个两个值也是可以的:

#sticky-nav{
    position: sticky;
    top: 20px;
    bottom: 20px;
}

多个sticky元素的情况

同一父元素下存在多个sticky元素的时候,前一个元素会被后一个sticky元素所覆盖,如果多个sticky元素的限位值相同,尺寸又刚好一致的话,视觉上看起来似乎是后者把前者给顶替掉了。多个sticky元素会依次叠加,直到它们父元素的预留活动空间走完,所有sticky元素被父元素一波带走。

标签: css

移动端可扫我直达哦~

推荐阅读

css 2024-10-23

在CSS中的如何进行打印设置

之前翻阅wordpress默认主题的时候,看到主题的打印设置占了很大的篇幅,嫌太麻烦所以直接跳过了。这几天想要打印一份博客上的内容,觉得页眉侧栏以及页尾都有点多余,只需要打印博文部分的内容就可以了。于是只能重新去学习关于打印的语法,发...

建站相关 css

css 2023-10-14

Css中的反选伪类“:not()”

该“:not()”伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中,它也被称为反选伪类(negation pseudo-class)。描述使用 :not() 时,有几种不寻常的效果和结果需要注意:可以使用此伪类编...

建站相关 css

css 2023-09-06

浮动阴影-为什么我的css浮动元素总是差那么点意思

很多站点都这样的效果,鼠标移上去时对应元素上浮,然后这样的元素往往有一排。博主常见的操作是左右平移几次,然后元素就跟琴键一样依次浮动,看起来非常解压。虽然这个效果有个小小的bug,将鼠标停留在浮动起点与终点的一小块区域,会导致重复触发...

建站相关 css

css 2023-09-04

ios下safari浏览器hover失效的问题

修改主题的时候发现ios下hover子菜单弹出后收不回去,虽然刷新一下页面或者点击一个其他的按钮也能正确关闭,但是始终感觉操作不便。于是安装了一个第三方浏览器(夸克)尝试了一下,第三方浏览器是没有什么问题的,纯属safari的锅。找了...

建站相关 css

css 2023-05-25

如何用css实现一个导航条的logo

浏览网络的时候看见某个站点的导航条菜单图标很有意思,导航条logo一般都是3条横杠,该站点的其中一条横杠是略短的,鼠标悬停时会动态伸长。尝试着自己利用css实现了类似的效果,考虑将其放入正在修改的wordpress主题当中,先记录一下...

建站相关 css

css 2023-05-21

一套纯css实现的图标库-ICONO

网络上有很多免费的图标库,比如fontawesome,比如typicons,利用一些小图标来代替呆板的文字描述,可以让页面显得更为简洁而生动。这类图标库也有一些美中不足之处,比如在不同分辨率下,可能产生边缘的锯齿,也可能会有部分几个图...

建站相关 css

css 2023-05-15

text-transform属性控制文本的大小写

看范例站点的css代码,发现这么一条,之前没有接触过这个属性,先就text-transform做个笔记。这个属性会改变元素中的字母大小写,而不论源文档中文本的大小写。如果值为 capitalize,则要对某些字母大写,但是并没有明确定...

建站相关 css

css 2022-12-01

利用css整站加灰色遮罩实现全站变灰

遇到举国同悲的日子,大部分站点会将原本五颜六色的画面呈现为黑白,用黑白的色调,表达对伟人的追思,为逝去的英雄送行。用css就可以很方便的实现全站变灰的效果。外部样式目前绝大多数站点都采用了引用外部css文件的方式,对于这类站点,只需要...

建站相关 css

css 2022-11-25

利用ul+css实现一个分页效果

尝试自定义了一个wordpress的后台设置页面,仅仅是添加了表单,暂时没有写css效果,分页器的页面展现是这样的,想用ul+css实现图片下方这样的效果。为ul添加一个flex属性,可以很方便的让其中包含的li元素排列为一行,为li...

建站相关 css