モバイルスクロールに隠されるべきときに、navbarの上のヘッダーが表示されます

Question

私はモバイル上でブートストラップナビバーの上に固定コンテンツを持っています。下にスクロールすると、navbarが50px上に移動します（navbarの上のコンテンツは50pxの高さです）。すべてがうまくいきますが、携帯電話でアドレスバーが消えるとすぐに、トップのコンテンツが再び表示され、その理由を理解できません。サイズ変更中のデスクトップでは正常に動作しています。このような行動を防ぐにはどうすればいいですか？

HTML

<div class="container" id="header-top-logo"><a href="/"><img src="assets/logo_reverse.svg" class="logo" alt="Superhoidjad"></a></div> 
<nav class="navbar navbar-fixed-top"> 
    <div class="container"> 
     <div class="col-md-12"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <a class="navbar-brand" class="pull-left" href="{{route('main.home')}}"><img src="assets/logo.svg" class="logo" alt="Superhoidjad"></a> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right navbar-item"> 
       {{-- 
       <li class="nav-item"><a class="nav-link" href="/login">Sisene</a></li> 
       <li class="nav-item"><a class="nav-link" href="/signup/family">Registreeri&nbsp</a></li> 
       --}} 
       <li class="nav-item {{ Route::current()->getName() == 'main.about' ? 'active' : '' }}"><a class="nav-link" href="{{route('main.about')}}">Meist</a></li> 
       <li class="nav-item {{ Route::current()->getName() == 'main.articles.all' ? 'active' : '' }}"><a class="nav-link" href="{{route('main.articles.all')}}">Artiklid</a></li> 
       <li class="nav-btn{{ Route::current()->getName() == '' ? 'active' : '' }}"><a href="#" data-toggle="modal" data-target="#parent_signup" class="search-nanny">Saada kutse</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
</nav> 

私のJS

//top logo scroll function 
function logoScroll() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() >= 50) { 
      $(".navbar").css("top", "0px"); 
     } else { 
      $(".navbar").css("top", "50px"); 
     } 
    }); 
} 

//hide top logo on load 
var wdwWidth = $(window).width(); 
if (wdwWidth <= 991) { 
    $(".navbar").css("top", 50); 
    logoScroll(); 
} else { 
    $(".navbar").css("top", "0px"); 
} 

Answer 1

あなたにも、resizeイベントに応答して試してみてください。これにあなたのjsの変更について

方法

$window.resize(function(){ 
    if ($(window).scrollTop() >= 50) { 
     $(".navbar").css("top", "0px"); 
    } else { 
     $(".navbar").css("top", "50px"); 
    } 
}); 

Answer 2

：

//top logo scroll function 
function logoScroll() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() >= 50) { 
      $(".navbar").css("top", "0px"); 
      $("#header-top-logo").css("display", "none"); 
     } else { 
      $(".navbar").css("top", "50px"); 
      $("#header-top-logo").css("display", "block"); 
     } 
    } 
}); 

EDIT：

私はダンが本当にで何が起こっているのかを理解して...多分.cssの機能は場所を切り替える必要があります（これを試してみてくださいurコード）：

//hide top logo on load 
    var wdwWidth = $(window).width(); 
    if (wdwWidth <= 991) { 
      $("#header-top-logo").css("display", "block"); 
    } else { 
      $("#header-top-logo").css("display", "none"); 
    }