如何使容器内的sticky-element按钮滚动时固定在屏幕顶部？

没问题！要让.sticky-element按钮在页面滚动时始终固定在屏幕顶部，我们只需要调整CSS就能实现，同时还能保持原有的布局不被破坏。

具体修改方案 #

我们需要给目标按钮添加固定定位属性，同时处理原容器的占位问题，避免布局跳动：

.menu{background:#ddd} 
.logo, .social-media, .sticky-container{ display:inline-block; width:30% } 
.logo{background:#000} 
.social-media{background:#080} 
.sticky-container{background:#333} 
.logo, .sticky-container{color:#fff}

/* 新增固定按钮样式 */
.sticky-element {
  position: fixed;
  top: 0;
  right: 15px; /* 根据你的实际布局调整这个值，保证位置符合预期 */
  background-color: #333; /* 和原容器背景保持一致 */
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  z-index: 100; /* 确保按钮不会被其他页面元素覆盖 */
}

/* 保持原容器占位，避免菜单布局跳动 */
.sticky-container {
  visibility: hidden;
}

代码说明 #

• position: fixed：让按钮脱离文档流，固定在浏览器视口的指定位置，不会随页面滚动而移动；
• top: 0：强制按钮贴在屏幕顶部；
• right: 15px：调整按钮的水平位置，如果你有固定宽度的.wrapper，可以用right: calc((100% - 你的wrapper宽度)/2)来让按钮和原位置对齐；
• z-index: 100：给按钮设置足够高的层级，防止被其他内容遮挡；
• visibility: hidden：让原.sticky-container保持宽度占位但不可见，这样菜单的三个30%区块布局不会因为按钮脱离流而变形。

如果不需要保留原容器的占位，直接去掉.sticky-container的visibility: hidden即可，但可能需要重新调整菜单的宽度分配哦。

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