React页面div滚动跟随失效，position定位问题排查

• 你当前设置position: fixed搭配top: 680px时，元素位置是相对浏览器视口计算的：即元素始终固定在距离视口顶部680px的位置。如果你的设备视口高度小于680px（多数14寸笔记本默认视口高度仅600-750px），元素就会超出视口下边界，看起来像固定在页面底部。
• position: sticky未生效通常是两个原因：一是sticky元素的某个祖先元素设置了overflow: hidden/auto/scroll属性，截断了滚动上下文；二是sticky元素的父容器高度小于元素自身高度，没有足够的滚动空间触发吸附逻辑。

根据你要的效果二选一即可：

方案1：元素始终固定在视口右侧（全程跟随视口移动） #

直接把top值调整到视口高度范围内即可，推荐用视口单位适配不同屏幕尺寸，同时加上z-index避免元素被其他内容遮挡：

.linkss {
  color: #8892b0;
  font-family: 'NTR', sans-serif;
  font-size: 25px;
  right: 10px;
  /* 示例1：距离视口顶部20%视口高度的位置固定 */
  top: 20vh;
  /* 示例2：如果要垂直居中，替换top为下面这行，70px是元素自身高度的一半左右
  top: calc(50vh - 70px);
  */
  padding-right: 30px;
  position: fixed;
  z-index: 99;
}

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

对应的JSX代码不需要改动，保持原有写法即可：

<div className="linkss">
  <h3>/ Links</h3>
  <a href="/etsy">/ Etsy Shop </a>
  <a href="/linkedin">/ LinkedIn </a>
  <a href="/instagram">/ Instagram </a>
</div>

方案2：sticky吸附效果（元素随页面滚动，到达指定位置后贴在视口上） #

需要做两处调整：

1. 把.linkss的直接父元素的overflow相关属性去掉，确保滚动上下文是页面根元素
2. 调整top值为你需要吸附的位置（比如距离视口顶部80px），如果要靠右对齐给元素加margin-left: auto

.linkss {
  color: #8892b0;
  font-family: 'NTR', sans-serif;
  font-size: 25px;
  right: 10px;
  top: 80px; /* 滚动到距离视口顶部80px时开始吸附 */
  padding-right: 30px;
  position: sticky;
  margin-left: auto;
  z-index: 99;
}
/* h3和a标签的样式和方案1保持一致即可 */

如果调整后位置还是不对，打开浏览器开发者工具选中.linkss元素，在Computed面板查看最终生效的position和top属性值，排查是否有其他全局样式覆盖了你写的规则。

内容的提问来源于stack exchange，提问作者rawan arafat