Javascript 修复了Jquery在后台转换时出现的标题问题

你好吗

我正在用jquery3.5、scss和bootstrap4编写代码。当屏幕位置大于“英雄”元素时，我试图更改标题的scss背景。当标题通过“英雄”位置时，它以非自然方式闪烁

这是我的代码：

SCSS：

JQUERY：

    $( document ).ready(function() {
        //get elements height
        header = $('.site-header').height();
        hero = $('#hero').height();

        //adjust padding according to element height
        $('#hero').css('padding-top', header)

        //change header bg based on hero height
        $(window).scroll(function (event) {
        var scrollHeight = $(window).scrollTop();
        if (!hero && scrollHeight >= 1){
            $('.site-header').addClass('bg-header');
        } else if(scrollHeight >= hero){
            $('.site-header').addClass('bg-header');
        }   else{
            $('.site-header').removeClass('bg-header');
        }

    });

});

HTML:

特别是在预防疾病方面。
对一辆汽车的压缩

    $( document ).ready(function() {
        //get elements height
        header = $('.site-header').height();
        hero = $('#hero').height();

        //adjust padding according to element height
        $('#hero').css('padding-top', header)

        //change header bg based on hero height
        $(window).scroll(function (event) {
        var scrollHeight = $(window).scrollTop();
        if (!hero && scrollHeight >= 1){
            $('.site-header').addClass('bg-header');
        } else if(scrollHeight >= hero){
            $('.site-header').addClass('bg-header');
        }   else{
            $('.site-header').removeClass('bg-header');
        }

    });

});

<header id="masthead" class="site-header">
      <div class="site-branding">
        <div class="container">
          <div class="brand">
            <img src="./wp-content/themes/wbp/assets/src/img/emanuel-monteiro.svg"
              alt="Emanuel Moneiro - Advocacia Previdenciária">
          </div>
          <div class="menu">
            <nav id="site-navigation" class="main-navigation">
              <ul id="menu-menu-1" class="nav"><li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-29"><a href="http://localhost:8888/wordpress/" aria-current="page">Início</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://localhost:8888/wordpress/pagina-exemplo/">Página de exemplo</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6"><a href="http://localhost:8888/wordpress/pagina-exemplo/">Teste</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-5"><a href="http://localhost:8888/wordpress/" aria-current="page">Início</a></li>
</ul>            </nav><!-- #site-navigation -->
          </div>
        </div>

      </div><!-- .site-branding -->



     


    </header><!-- #masthead -->
        <section id="hero">

      <div class="container">
        <div class="row">
          <div class="col-hd-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 d-flex flex-column justify-content-center">
            <h1>Especialistas em causas previdenciárias<span class="orange">.</span></h1>
            <p>Comprometimento em oferecer a melhor estratégia para garantir os seus direitos</p>
          </div>
          <div class="col-hd-6 col-xl-6 col-lg-6 col-md-6 col-sm-6">
                    <img src="./wp-content/themes/wbp/assets/src/img/head1.png" class="img-fluid" alt="">
          </div>
        </div>

      </div>
    </section>