向下滚动时如何动态偏移顶栏高度

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