I am facing an issue with fixed content on mobile positioned above a Bootstrap navbar. The problem arises when scrolling down, causing the navbar to move up by 50px (the height of the content above the navbar). Everything seems to work fine initially, but once the address bar disappears on mobile, the top content is displayed again unexpectedly. This behavior does not occur while resizing on desktop. How can I prevent this from happening?
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 </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>
My 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");
}