我的主页上有这个“div”，希望它在我滚动时随我移动，顺便说一句，我正在为网站使用 react

Question

我的主页上有这个div并希望它在我滚动时与我一起移动：我尝试使用 position:sticky; 和位置：固定并添加顶部：600px； 但它没有移动到顶部它卡在底部

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

Answer 1

您需要在 componentDidMount 中使用 addEventListener，如下所示：

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

Answer 2

我认为它被卡在了底部，因为你给了top:680px; 将其减小到较小的值，例如20px 。 并将 position 属性设置为position:sticky;