Как скрыть / показать меню липкого нижнего колонтитула с помощью тегов div вместо пикселей с помощью JS

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Во-первых, позвольте мне уточнить, что я новичок в этом, поэтому прошу прощения за использование неправильной терминологии.

Я хочу воссоздать форму регистрации липкого нижнего колонтитула Morning Brew (нажмите здесь для справки), но код, который я сейчас использую, отслеживает только пиксели. Есть ли способ, которым я могу это сделать, чтобы он вместо этого искал теги div?

 <script>
  var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos < 4200 amp;amp; prevScrollpos > 200) {
    document.getElementsByClassName("_form")[0].style.display = "block";
  } else {
    document.getElementsByClassName("_form")[0].style.display = "none";
  }
  prevScrollpos = currentScrollPos;
} 
</script>  

Ответ №1:

Вы можете использовать window и получать событие прокрутки таким образом:

 let element = document.getElementById('footer');

  window.addEventListener('scroll', function(e){
    let Y = window.scrollY;
    console.log(Y);
    Y > 600 ? element.style.display = 'block' : element.style.display = 'none';
  })  
 body{
    height: 1600px;
}  
 <div id="footer">Element to fix</div>  

Комментарии:

1. Он по-прежнему делает то же самое. /: