Changing position of title on scroll

I’m trying to get from this:

To this

While scrolling down about half of the picture. The header wont be visible after scrolling past the menu. Does anyone have any ideas on how to achieve this?

Answer

There is some ways to achieve that, since you are not sharing any code it is hard to explain anything better, you can listen to changes on the background where the scroll is , and based on that number update the position of your title, i ll let you here a simple example that you can test on your own to see what i mean

If there is anything you dont understand feel free to ask, or discuss about

HTML

 <div id="box">
  <div id="box-to-force-scroll">
    <div id="title"> title </div>
  </div>
</div>

CSS

#box {
  width:100px;
  height:100px;
  background-color:blue;
  overflow:auto;
}

#box-to-force-scroll {
  width:100px;
  height:1000px;
}


#title {
  font-size:20px;
  position:absolute;
  top:10px;
  left:10px;
  color:white;
  text-transform:uppercase;
}

JS

document.getElementById('box').addEventListener('scroll', function(el) { 
  // random math just to show it moving
  let scrollTop = el.target.scrollTop
  let newVal = 10 + ( parseInt(scrollTop, 10) / 3)

  document.getElementById('title').style.top = `${newVal}px`
})