html - 从下面的滚动 div 中剪下一个固定的 div

标签 html css overflow css-position clip-path

我有一个固定的标题,我只想在它位于特定图像的顶部时显示。

当用户滚动时,我希望固定标题随着图像在其下方滚动而开始隐藏 enter image description here

      <Header 
        position=fixed
        clip-path=url(#clip-stage.id)> Fixed Header RED
      </Header>
      <Slide
       position=absolute
      >
       <svg 
        position=absolute
       >
        <defs>
            <clipPath id=clip-stage.id}>
              <rect 
                x=0 y=0 height=100% width=100%
              />
            </clipPath>
        </defs>
       </svg>
    </Slide>

** 添加伪CSS代码以供引用**


我尝试在每个背景图像周围创建一个 clipPath,但这对我不起作用,并且相信一些溢出技巧可能会奏效。

最佳答案

我建议使用 Bootstrap 并构建一个快速导航栏。您可以轻松地编写代码或复制并粘贴一些 JS,以在滚动时隐藏导航栏。

这个的 css 是:

display:none;

重点是 Bootstrap 让这一切变得非常简单!

关于html - 从下面的滚动 div 中剪下一个固定的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41007484/

相关文章:

html - 是否可以在 GitHub markdown 中为图像添加边框?

javascript - 如何使用 AngularJS 更改 css 样式?

javascript - 溢出和调整大小问题

javascript - CSS3 过渡可轻松用于 div

html - 列表溢出滚动

javascript - 隐藏 HTML 标签上的溢出使浏览器跳转到页面顶部

css - + 添加中间 dom 元素时选择器不适用

基于另一个文本框值隐藏文本框的 Javascript 代码

javascript - 使用 jQuery 将 HTML 页面动态加载到 div 中

html - 应针对特定维度隐藏大文本