Как динамически компенсировать высоту верхней панели при прокрутке вниз

Question

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

Вот пример того, чего я хочу достичь: https://8kflexwarm.com/

Итак, я получил этот кусок кода, который работает, но я чувствую, что это не оптимизированный, не чистый код. Я считаю, что должен быть способ смещения $('.announcement-bar') вместо того, чтобы делать это вручную с размером окна.

Кроме того, почему этот код не работает, когда я обновляю экран, а я не наверху страницы?

Есть ли способ улучшить этот код без использования библиотеки?

if($(window).width() >= 686){
    var a = $(".site-header").offset().top;   
    function scrollListener(){
        if($(document).scrollTop() > a)
        {   
          $('.site-header').css({"margin-top":"-40px"});
          $('.site-header').css({"transition":"0.4s"});
        } else {
          $('.site-header').css({"margin-top":"0px"});
          $('.site-header').css({"transition":"0.4s"});      
        }
    };
    $(document).scroll(scrollListener);
    scrollListener();
} else if($(window).width() >= 370) {  
	var a = $(".site-header").offset().top;     
    function scrollListener(){
        if($(document).scrollTop() > a)
        {   
          $('.site-header').css({"margin-top":"-65px"});
          $('.site-header').css({"transition":"0.4s"});
        } else {
          $('.site-header').css({"margin-top":"0px"});
          $('.site-header').css({"transition":"0.4s"});      
        }
    };
    $(document).scroll(scrollListener);
    scrollListener();  
} else {
	var a = $(".site-header").offset().top;     
    function scrollListener(){
        if($(document).scrollTop() > a)
        {   
          $('.site-header').css({"margin-top":"-90px"});
          $('.site-header').css({"transition":"0.4s"});
        } else {
          $('.site-header').css({"margin-top":"0px"});
          $('.site-header').css({"transition":"0.4s"});      
        }
    };
    $(document).scroll(scrollListener);
    scrollListener();   
};

Answer 1

Пожалуйста, предоставьте codePen, чтобы вам было проще ответить на ваш вопрос.

Я придумал этот непроверенный фрагмент JavaScript:

var myApp = (function(app) {

  const $elements = {
    siteHeader = null,
  }

  function setPosition() {
    const scrollTop = $(document).scrollTop()
    const offsetTop = $elements.siteHeader.offset().top

    if(scrollTop > offsetTop){
      $elements.siteHeader.css({'margin-top':`${$elements.siteHeader.height() * -1}px`})
    } else {
      $elements.siteHeader.css({'margin-top':'0px'})
    }
  }

  function initialize() {
    // Wait for all elements to be created
    $(function() {
      $elements.siteHeader = $('.site-header')
      setPosition()
      $(document).scroll(setPosition)
      $(document).resize(setPosition)
    })
  }

  initialize()

  return app;
})(myApp || {})