css - Make element sticky from certain height

Question

I am trying to make the following element (which is back to top link) appear just from a certain height.

As it for now it is always displayed and I would like to appear after some scrolling or even after a fixed size.

I would like to do it with CSS only if possible.

<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>

Thanks

question from:https://stackoverflow.com/questions/65868789/make-element-sticky-from-certain-height

Answer 1

You can approximate like below

.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>