如何用纯HTML、CSS和JS创建无干扰式Sticky通知弹窗

下面是满足你需求的Sticky弹窗实现方案，核心特点是固定位置不随页面滚动消失、无自动关闭计时、支持内部关闭按钮操作：

HTML结构 #

<!-- Sticky弹窗容器 -->
<div class="sticky-popup" id="stickyPopup">
  <!-- 关闭按钮 -->
  <button class="popup-close" id="popupClose">&times;</button>
  <!-- 弹窗内容 -->
  <div class="popup-content">
    <p>这里是Sticky弹窗的内容</p>
  </div>
</div>

CSS样式 #

/* 弹窗基础样式 */
.sticky-popup {
  position: fixed; /* 固定定位，实现滚动时不跟随页面移动 */
  bottom: 20px;
  right: 20px; /* 放置在右下角，可根据需求调整位置 */
  width: 300px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  z-index: 9999; /* 确保弹窗在页面最上层，不被其他元素遮挡 */
  padding: 16px;
  box-sizing: border-box;
}

/* 关闭按钮样式 */
.popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.popup-close:hover {
  color: #000;
}

/* 弹窗内容区域 */
.popup-content {
  margin-top: 24px; /* 避开关闭按钮的位置 */
}

JavaScript逻辑 #

// 获取弹窗和关闭按钮元素
const stickyPopup = document.getElementById('stickyPopup');
const popupClose = document.getElementById('popupClose');

// 绑定关闭按钮点击事件
popupClose.addEventListener('click', function() {
  stickyPopup.style.display = 'none';
  // 如果需要支持再次打开，可改用添加/移除类的方式：
  // stickyPopup.classList.add('popup-hidden');
});

// 如需默认显示弹窗，确保初始状态display不为none即可

关键实现要点 #

• 使用position: fixed：这是实现弹窗不随页面滚动移动的核心，固定定位会将元素相对于视口定位，不受页面滚动影响。
• 无自动关闭逻辑：完全移除定时关闭的setTimeout代码，仅通过用户点击关闭按钮触发隐藏操作，符合“无计时”要求。
• 低干扰设计：通过柔和的阴影、简洁的布局避免对页面内容造成过度遮挡，同时通过z-index确保弹窗不被其他元素覆盖。

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