Sticky CSS实现了一个自动显示后退按钮的小交互

terry 2年前 (2023-09-27) 阅读数 76 #数据结构与算法

在一些文档或者文章中，经常可以看到这样的“后退”功能。具体交互有两种

比如LuLu UI

是可点击可滚动的。看起来需要使用JavaScript。其实不是的，我想了想，只需要一点CSS就可以实现这样的交互效果。我们来看看

1.粘性滚动

这里你需要一点想象力。例如，它仅在滚动一定距离后出现。这与 CSS 的粘性概念类似吗？简单的粘合剂的一般作用就是滚动一定的距离，然后将其固定在一定的位置。 mdn 解释如下

该元素根据正常文档流定位，然后相对于其 最近的可滚动祖先 并包含一个块（块的最近祖先），包括表格相关元素，top、 right、bottom 和 M❀ingoo 值已移位。偏移值不会影响任何其他元素的位置。

虽然我们需要的沟通是一条出路，但还是可以结合一定的“技巧”来简单套用布局

<a class="back"></a>
<article>
...很多内容
</article>

注意一定要把.back放在前面。，否则没办法启动粘性定位然后添加粘性定位

.back{
  position: sticky;
  display: block;
  top: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
  background-size: 50%;
  width: 50px;
  height: 50px;
}

到.back。由于此处 top 为 0，因此后退按钮在滚动期间固定在顶部。如下图

当上改为负值时会发生什么？可以看到按钮固定在离屏幕较远的地方100vh

.back{
  /**/
  position: sticky;
  top: -30px;
  transform: translateY(100vh);
}

这样我们需要的效果就很接近了，但最终只出现了一部分，下面的

原则是如下

最后将的上设置小一些，直到.后面能够完全显现出来，例如设置-60px

.back{
  /**/
  position: sticky;
  top: -60px;
  transform: translateY(100vh);
}

就基本完成了，但是还有还有一些问题，下面我们来看看。位于右下角

上面的实现其实还有两个布局问题需要优化：

按钮本身占用一定的空间
按钮通常位于右下角

一般情况下，为了避免占用元素的空间，可以考虑设置绝对定位。但由于此处指定了position:sticky，因此无法再指定绝对定位。另外，我们还可以使用浮动float，可以轻松解决以上两个布局问题

.back{
  /***/
  float: right
}

设置正确的浮动有两个好处。首先，它脱离文档流并且不影响高度。二是为了更好的集中效应。实际效果如下

其实这里还有一个小问题。如果页眉中有大量文字，您可以清楚地看到正确的空间效果。如下

该如何处理？很简单，加一个负边距就可以了

.back{
  /***/
  float: right；
  margin-top:-50px;/*自身高度*/
}

但是新的问题出现了，下面的按钮又漏出来了

因为被按钮取代了❙❙❙ y 忙。现在更改按钮位置的唯一方法是变换。这里可以使用calc来计算。同时，top也应相应降低高度。

.back{
  /***/
  float: right；
  margin-top:-50px;/*自身高度*/
  top: -110px; /*60 + 50*/
  transform: translateY(calc(100vh + 50px));
}

完美！

`3。返回顶部`

返回顶部更容易。一般可以通过href='#'来实现。当然，你可以添加滚动行为，实现平滑滚动： smooth

html, body { 
  scroll-behavior:smooth; 
}

实际效果如下

完整代码在最后添加，很少

html,body{
  scroll-behavior: smooth;
}
.back{
  position: sticky;
  float: right;
  top: -110px;
  margin-top: -50px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
  background-size: 50%;
  width: 50px;
  height: 50px;
  transform: translateY(calc(100vh + 50px));
}

HTML只需要在开始

<body>
  <a class="back" href="#"></a><!--添加再这里就行了-->
  <article>
  ...很多内容
  </article>
</body>

网页代码可以从后面访问（codepen.io）点击预览

`IV.总结与说明`

上面使用sticky CSS实现了一个自动显示返回按钮的小交互。代码量本身并不困难。事实上，将相对相似的组合起来有点天方夜谭。关联效应，尝试更多可能会带来不同的解决方案。我们总结一下主要实现点：

CSS Sticky 功能可以实现粘性滚动效果，可以设置负值
transformY（100vh）可以偏移 1 个屏幕高度，而不影响 padding。
浮动可以脱离文档流，不影响高度负边距可以补偿浮动环绕声效果
滚动行为：smooth可以实现平滑滚动
兼容性取决于粘性，不兼容IE还是蛮实用的小功能，虽然JS也可以实现，但是既然可以用CSS实现，何必还要用JS呢？相比JS，CSS使用简单方便，不用担心加载问题，而且开销几乎为零。