页面滚动时如何从顶部裁剪隐藏使用clip-path和fixed定位的元素？

你提到的旋转思路是可行的，同时也可以选择通过JS动态调整clip-path的方式实现，两种方案如下： #

方案1：纯CSS旋转实现（无需JS） #

针对transform创建包含块的问题，我们可以通过调整定位基准来兼容，修改后的CSS代码如下：

#main-container {
  position: relative;
  height: 100px;
  width: 100vw;
}
#clip-container {
  position: absolute;
  height: 80px;
  width: 100vw;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
  background-color: rgba(255, 165, 0, 0.5);
  margin-top: 10px;
  /* 新增：容器旋转180度 */
  transform: rotate(180deg);
  /* 调整位置抵消旋转带来的偏移 */
  top: 0;
  left: 0;
}
.filler-div {
  background-color: blue;
  width: 100vw;
  height: 100px;
}
#text {
  /* 用bottom作为定位基准，避免transform包含块影响 */
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100vw;
  text-align: center;
  /* 新增：文本反向旋转180度恢复正常显示 */
  transform: rotate(180deg);
}

HTML代码无需修改，即可实现向下滚动时从顶部开始裁剪元素的效果。 #

方案2：JS动态调整clip-path实现（逻辑更直观，无旋转兼容问题） #

如果不想使用旋转方案，可以监听滚动事件动态调整裁剪区域的顶部坐标，原有CSS不需要修改，新增以下JS代码即可：

const clipContainer = document.getElementById('clip-container');
window.addEventListener('scroll', () => {
  // 获取裁剪容器距离视口顶部的距离
  const containerTop = clipContainer.getBoundingClientRect().top;
  // 计算需要裁剪的顶部高度
  const clipTop = Math.max(0, -containerTop);
  // 动态设置clip-path，从顶部开始裁剪超出的部分
  clipContainer.style.clipPath = `polygon(0 ${clipTop}px, 100% ${clipTop}px, 100% 100%, 0 100%)`;
});

该方案不需要修改原有CSS的定位逻辑，适配性更强，也更容易扩展其他裁剪效果。

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