如何在向下滾動時動態偏移頂部條形高度

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