如果我滚动固定按钮移动

Question

我的页面右下角有一个 Whatsapp Link 按钮，当我更改页面时它会停留在它应该在的位置，但如果我向下滚动并更改页面，它会移动到页面顶部。我不知道为什么会这样。

这是我的 CSS 代码：

    .floating {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 3px #999;
  z-index: 100000;
  right: 15px;
}

.my-float {
  margin-top: 16px;
}

.whatsapp-container {
  position: sticky;
 
}

和 jsx：

<div className="whatsapp-container">
  <a
    href=""
    className="link-simulator floating"
    target="_blank"
  >
    <i className="fab fa-whatsapp my-float"></i>
  </a>
</div>

谁能帮我解决这个问题？

Answer 1

我无法从您发布的代码中重现该问题，但这可能与 whatsapp 容器的 position:sticky 有关，您是否尝试删除它？

Answer 2

所以，显然，我所做的没有任何问题，我只是先从反应渲染中获得了另一个 posed-element 并且没有让这个渲染，所以定位的事情没有用

如果我滚动固定按钮移动

Fixed button moving if i scroll

css

button

sticky

jsx