公告:携程集团2022年秋季校园招聘会内推!!

css中的visibility和position新属性sticky

11185次浏览

前言

今天介绍的css的visibility和position新属性sticky,之前的文章中并没有提及。关于css文章,前面写了不少。但是这2个的介绍真没有,今天简单介绍一下,就当是补充和积累了吧。

visibility

关于visibility,我们平时用的蛮多,大家知道的是,他和display:none的区别。visibility:hidden是占空间的,渲染的时候会渲染,但是display:none是不占空间的,具体渲染和加载,请看我之前的文章:https://www.haorooms.com/post/web_http_request

但是:把一个设置为visibility: visible的元素放在一个设置为visibility: hidden的元素里面,会发生什么?

.hidden {
  visibility: hidden;
}
.hidden .visible {
  visibility: visible;
}

如下图:

enter image description here

按钮在橙色区域内层,外层隐藏了,但是内存照常显示!

html和css代码:

<div class="wrapper">
  <button class="button" id="button">haorooms test visible</button>
sfdfsdfsfsdf其他测试文章
</div>

.hidden {
  visibility: hidden;
}
.hidden .button {
  visibility: visible;
}

.wrapper {
  background: orange;
  padding: 10px;
  overflow: hidden;
}
.button {
  font-size: 30px;
}

js代码

document.getElementById('button').onclick = function() {
    document.body.classList.toggle("hidden");
}

position: sticky

这个属性之前也了解过一部分,但是最近谷歌又支持了这个属性,让人拍手称快!

单词sticky的中文意思是“粘性的”,position:sticky表现也符合这个粘性的表现。基本上,可以看出是position:relative和position:fixed的结合体——当元素在屏幕内,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。

那我很久之前做的一个案例来说吧,如下图:

enter image description here

以前用js和css来做的,现在只要在固定的地方加入如下代码:

.fixednav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

关于position: sticky

position:sticky有个非常重要的特性,那就是sticky元素效果完全受制于父级元素们。

这和position:fixed定位有着根本性的不同,fixed元素直抵页面根元素,其他父元素对其left/top定位无法限制。

sticky元素以下一些特性表现:

1、父级元素不能有任何overflow:visible以为的overflow设置,否则没有粘滞效果。因为改变了滚动容器(即使没有出现滚动条)。因此,如果你的position:sticky无效,看看是不是某一个祖先元素设置了overflow:hidden,移除之即可。

2、同一个父容器中的sticky元素,如果定位值相等,则会重叠;如果属于不同父元素,则会鸠占鹊巢,挤开原来的元素,形成依次占位的效果。

3、sticky定位,不仅可以设置top,基于滚动容器上边缘定位;还可以设置bottom,也就是相对底部粘滞。如果是水平滚动,也可以设置left和right值。

双sticky 实现头部滑动变小效果

核心代码如下:

<header>
    <header-inner>
        ...
    </header-inner>
</header>
body {
    --height-outer: 120px;
    --height-inner: 60px;

    background-color: #eee;
    margin: 0;
}
header {
    display: flex;
    align-items: center;
    position: sticky;
    height: var(--height-outer);
    top: calc(var(--height-inner) - var(--height-outer));
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}
header-inner {
    display: flex;
    line-height: var(--height-inner);
    width: 980px;
    max-width: calc(100% - 2rem);
    margin: 0 auto;
    justify-content: space-between;
    position: sticky;
    top: 0; 
}

Tags: cssvisibilitysticky

相关文章: