自举以上的导航区

Question

我想向上滚动页面时隐藏菜单栏上方的div。菜单栏在滚动时显示，但div必须隐藏。

这是我的代码。

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class='col-md-12-fluid'> 
     <form class="navbar-form navbar-right" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
    </div> 

    <div class='clearfix'> </div> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="index.html"><img src="images/kk.png"></a> 
    </div> 

    <!-- 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"> 
     <li><a href="index.html">Home </a></li> 
     <li><a href="aboutus.html">About Us</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
     <li><a href="gallery.html">Gallery</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="safety.html">Safety Trainings</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="dev.html">Development of HSE plan and Procedures</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="hse.html">HSE Consultation</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.contaenter code hereiner-fluid --> 
</nav> 

Answer 1

嗨，你应该隐藏上面的导航包含div的行。我已经在这里创造http://www.bootply.com/KRFKQdd9Cz

工作演示jQuery的

$(document).ready(function(){ 
     $(document).on('scroll', function(){ 
     $('.container-fluid .col-md-12-fluid').eq(0).hide(); 
     console.log($(document).scrollTop()); 
//If you scroll to top of the page the search form shows again 
     if($(document).scrollTop()==0){ 
      $('.container-fluid .col-md-12-fluid').eq(0).show(); 
     } 
     }); 
    });