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