Search code examples
javascriptwordpressscroll

Changing position of title on scroll

I'm trying to get from this:

enter image description here

To this enter image description here

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?

Solution

  • 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`
})