Question

我在Bootstrap导航栏上方的移动设备上有固定内容。向下滚动时，导航栏向上移动50px（导航栏上方的内容高度为50px）。一切都很好，但一旦地址栏在移动设备中消失，顶级内容会再次显示，我不明白为什么。在桌面上调整大小时工作正常。我该如何防止这种行为？

HTML

i:=$(shell echo 2)

我的JS

<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>

Answer 1

你也应该尝试回复resize事件。

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

Answer 2

如何将你的js更改为：

//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");
        }
     }
});

编辑：

尝试这个（...也许.css函数应该切换到我真正了解你的代码中发生了什么）：

    //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");
    }

导航栏上方的标题会在应隐藏时显示在移动滚动条上

2 个答案: