从下面的滚动div剪辑固定的div

Question

I have a fixed header that I only want to show when it is on top of a specific image.

As the user scrolls I want the the fixed header to begin to hide as the image scrolls beneath it

      <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>

** added pseudo css code for reference **

---

I attempted creating a clipPath around every background image which didnt work for me and believe that maybe some overflow trickery could work.

Answer 1

I would suggest using Bootstrap and build a quick navbar. You could easily code or copy and paste some JS that would hide the navbar on scroll.

The css for this would be:

display:none;

The point is Bootstrap makes all this and more very easy!