从一定高度使元素变粘

Question

我正在尝试使以下元素（返回顶部 link）仅从特定高度出现。

因为它现在总是显示，我想在一些滚动后甚至在固定大小后出现。

如果可能，我想用 CSS 来做。

<div style='z-index: 9999; bottom: 3em; right: 3em; position: sticky; width: 32px; text-align: center'>
  <a href='#top'>
    <i class='fas fa-chevron-up fa-2x'/>
  </a>
</div>

谢谢

Answer 1

你可以近似如下

.box {
  position:absolute;
  display:flex;
  top:600px; /* the height you want here*/
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
}

.box a {
  position: sticky;
  z-index:999;
  margin:auto 3em 3em auto;
  bottom: 3em;
  border-radius: 50%;
  background: black;
  color: #fff;
  padding: 5px 7px;
  font-size:16px;
  pointer-events:initial;
}


body {
  font-size:50px;
  position:relative;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur ultrices arcu viverra malesuada. Donec pulvinar luctus lorem, eu consectetur felis interdum et. Nullam libero sem, aliquet eu porttitor ac, ullamcorper eget purus. Quisque tempus diam lorem, in aliquet arcu ullamcorper ut. Pellentesque non commodo tortor. Sed malesuada augue pellentesque diam aliquet, sit amet rhoncus diam mollis. Fusce justo leo, finibus eu turpis sit amet, ultrices condimentum mi. Duis at ornare eros, id venenatis neque. Aliquam blandit hendrerit tempus. Curabitur suscipit ipsum nec accumsan placerat.
<div class="box" >
  <a href='#top'>
    <i class='fas fa-chevron-up fa-2x'></i>
  </a>
</div>

您还可以考虑使用遮罩技巧在不需要时隐藏元素（页面上没有滚动）

.box {
  position:absolute;
  display:flex;
  top:600px; /* the height you want here*/
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
  -webkit-mask:linear-gradient(transparent calc(100vh - 600px),#fff 0);
}

.box a {
  position: sticky;
  z-index:999;
  margin:auto 3em 3em auto;
  bottom: 3em;
  border-radius: 50%;
  background: black;
  color: #fff;
  padding: 5px 7px;
  font-size:16px;
  pointer-events:initial;
}


body {
  font-size:50px;
  position:relative;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur ultrices arcu viverra malesuada. Donec pulvinar luctus lorem, eu consectetur felis interdum et. Nullam libero sem, aliquet eu porttitor ac, ullamcorper eget purus. Quisque tempus diam lorem, in aliquet arcu ullamcorper ut. Pellentesque non commodo tortor. Sed malesuada augue pellentesque diam aliquet, sit amet rhoncus diam mollis. Fusce justo leo, finibus eu turpis sit amet, ultrices condimentum mi. Duis at ornare eros, id venenatis neque. Aliquam blandit hendrerit tempus. Curabitur suscipit ipsum nec accumsan placerat.
<div class="box" >
  <a href='#top'>
    <i class='fas fa-chevron-up fa-2x'></i>
  </a>
</div>

从一定高度使元素变粘

Make element sticky from certain height

css

sticky