Question

考虑到栏的高度在较小的设备上更重要，我试图向下滚动公告栏。

所以我最终得到了这段代码，它可以正常工作，但是我觉得它不是经过优化的，不是干净的代码。我认为必须有一种偏移$('.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 || {})

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

1 个答案: