css sticky布局 - Githubissues

mianmalife commented 4 years ago

    sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。
    因此，它能够形成“动态固定”的效果。比如，网页的搜索工具栏，初始加载时在自己的默认位置（relative定位）。
    页面向下滚动时，工具栏变成固定位置，始终停留在页面头部（fixed定位）。
    等到页面重新向上滚动回到原位，工具栏也会回到默认位置。
    sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生“动态固定”的效果。原因是这四个属性用来定义“偏移距离”，浏览器把它当作sticky的生效门槛。
    它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。
    请看下面的示例代码。（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）

mianmalife commented 4 years ago

<style>
* {
    margin: 0;
    padding: 0;
}
body {
    height: 2000px;
}
div {
    position: -webkit-sticky; /* safari 浏览器 */
    position: sticky; /* 其他浏览器 */
    top: 0px;
    height: 40px;
    background: #cccccc;
}
</style>
<body>
    <div>hello sticky</div>
</body>

mianmalife commented 4 years ago

可以做到滚动固定导航栏布局

mianmalife commented 4 years ago

div {
    margin: 0 auto;
    width: 300px;
    position: sticky;
    top: 80px;
}
img {
    width: 300px;
    height: 200px;
    border: 10px solid #fff;
    border-radius: 4px;
}
<div><img class="img1" src="image/20120117124312_hUVM4.jpg" alt=""></div>
<div><img class="img2" src="image/20170113093657_LHjkZ.png" alt=""></div>
<div><img class="img3" src="image/8f3d8fde11e7e89fb855de0b1644479f_r.jpg" alt=""></div>
<div><img class="img4" src="image/88d7ecdb4aff46a103ed6a12ab924107_r.jpg" alt=""></div>
<div><img class="img5" src="image/93fd0d1b9b423bf6a2cfd2aa8c5eab18_r.jpg" alt=""></div>
<div><img class="img6" src="image/627b8be1352b42574db7ebb66c029fe4_r.jpg" alt=""></div>

mianmalife commented 4 years ago

QQ截图20191119155611

堆叠效果（滚动）

mianmalife / notebook

css sticky布局 #16