css中的visibility和position新属性sticky

前言

今天介绍的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;
}

如下图：

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

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。

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

以前用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; 
}