I have this `div` on my home page and want it to move with me when I scroll, I am using react for the website btw

user_9612864 0
Viewed 53

I have this div on my home page and want it to move with me when I scroll: I tried using position:sticky; and position: fixed and adding top: 600px; but its not moving to the top its stuck at the bottom

.linkss {
  color: #8892b0;
  font-family: 'NTR', sans-serif;
  font-size: 25px;
  right: 10px;
  top: 680px;
  padding-right: 30px;
  position: fixed;
}

.linkss h3 {
  margin: 0px;
  height: 50px;
  color: #c9c1f5;
}

.linkss a {
  border: 0px;
  display: block;
  padding: 0px;
  margin: 0px;
  font-size: 23px;
  padding-left: 30px;
  color: #c9c1f5;
  height: 30px;
  width: 110px;
}
<div className="linkss">
  <h3>/ Links</h3>
  <a href="https://www.etsy.com/ca/shop/VanillaUnlimited">/ Etsy Shop </a>
  <a href="https://www.etsy.com/ca/shop/VanillaUnlimited">/ LinkedIn </a>
  <a href="https://www.etsy.com/ca/shop/VanillaUnlimited">/ Instagram </a>
</div>

reactjs css html javascript
2 Answers

You need to use addEventListener in componentDidMount as below:

componentDidMount() {
  document.addEventListener('scroll', this.doSomething)
}

doSomething = () => {
  if (window.pageYOffset > 100) {
     // add a new class (with top: 0) to element or change style of element by top = 0
  } else {
    // do something else
  }
}
user_193730910

I think it's stuck to the bottom because you have given top:680px; decrease it to something smaller like 20px. And set the position property to position:sticky;

user_101866110
Related