更改滾動標題的 position

Question

我試圖從中得到：

對此

同時向下滾動大約一半的圖片。 滾動菜單后，header 將不可見。 有沒有人對如何實現這一目標有任何想法？

Answer 1

有一些方法可以實現這一點，由於您沒有共享任何代碼，因此很難更好地解釋任何事情，您可以聽取滾動所在背景的變化，並根據該數字更新您的標題的 position，我會讓你在這里舉一個簡單的例子，你可以自己測試看看我的意思

有什么不明白的歡迎提問或討論

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