Изменение положения заголовка на свитке - PullRequest
Новая
       38

Изменение положения заголовка на свитке

0 голосов
/ 07 ноября 2019

Я пытаюсь получить от этого:

enter image description here

К этому enter image description here

При прокрутке вниз около половины картинки. Заголовок не будет виден после прокрутки мимо меню. У кого-нибудь есть идеи как этого добиться?

1 Ответ

0 голосов
/ 07 ноября 2019

Есть несколько способов добиться этого, так как вы не делитесь никаким кодом, трудно объяснить что-либо лучше, вы можете прослушать изменения на фоне, где находится прокрутка, и, основываясь на этом числе, обновить позицию вашего заголовка. Я приведу здесь простой пример, который вы можете проверить самостоятельно, чтобы понять, что я имею в виду

Если есть что-то, чего вы не понимаете, не стесняйтесь спрашивать или обсуждать

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