滚动上的 jquery 隐藏/显示功能无法始终如一地工作

Question

我有一个 Bootstrap 固定导航栏，它在滚动时移动到顶部。在它上面是一个搜索栏，我想在加载时显示它，然后在滚动时它隐藏并出现在菜单栏上。我让它与一些 jquery 一起工作，但效果不佳。它并不总是改变状态，一旦它出现在菜单栏上，如果您继续滚动它就会消失。这是我的代码笔:http://codepen.io/iamgonge/pen/bqWdJO

$(function() {
  $(document).on("mousewheel", function() {
    if ($(document).scrollTop() < 1) {
      $('.bob').hide();
      $('.hide-me').show();
    } else {
      $('.bob').show();
      $('.hide-me').hide();
    };
  });
});

$('#nav').affix({
  offset: {
    top: $('header').height()
  }
});

$('#sidebar').affix({
  offset: {
    top: 50
  }
});

.navbar {
  background-color: #4F96BA;
}

.navbar-form input,
.form-inline input {
  width: auto;
}

header {
  height: 150px;
}

#nav.affix {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

#sidebar.affix-top {
  position: static;
}

#sidebar.affix {
  position: fixed;
  top: 80px;
}

.mick {
  display: block;
}

.mick .navbar-form {
  padding: 20px 0px;
}

.mick h1 {
  vertical-align: middle;
}

<header class="masthead">
  <div class="container">
    <div class="row">
      <div class="col-sm-8">
        <h1><a href="#">My Jquery is wonky</a>
          <p class="lead">Why is it wonky?</p>
        </h1>
      </div>
      <div class=" col-sm-4 ">
        <div class="mick">
          <div class="pull-right hidden-sm">
            <h1><a href="#"><i class="glyphicon glyphicon-user"></i> <i class="glyphicon glyphicon-chevron-down"></i></a></h1>

          </div>
          <div class="bob">
            <form class="navbar-form">
              <input type="text" class="form-control" placeholder="Search">
              <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>


<!-- Begin Navbar -->
<div id="nav">
  <div class="navbar navbar-default navbar-static">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
        <span class="glyphicon glyphicon-bar"></span>
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="divider"></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
        <ul class="nav pull-right navbar-nav">
          <li class="hide-me">
            <form class="navbar-form">
              <input type="text" class="form-control" placeholder="Search">
              <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
            </form>
          </li>
          <li>
            <a href="#"><i class="glyphicon glyphicon-flag"></i> <span class="badge">2</span></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- /.navbar -->
</div>

<!-- Begin Body -->
<div class="container">
  <div class="row">

    <div class="col-sm-12">
      <h2>Content</h2>
      <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
        voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores </p>
      <p>eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>

      <hr class="col-sm-6">

      <h2>Content</h2>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
      ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut

      <hr class="col-sm-6">

      <h2>Content</h2>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
      ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut

      <hr class="col-sm-6">

      <h2>Content</h2>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
      ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut

      <h2>Content butt</h2>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
      ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut




    </div>
  </div>
</div>

Answer 1

请删除鼠标滚轮上的事件并添加此代码，如果滚动超过 .masthead 高度，此代码将隐藏/显示

$(window).scroll(function() {
  $('.hide-me').hide();
  var scroll = $(window).scrollTop();
  var heroHeight = $('.masthead').outerHeight() ;
  if (scroll >= heroHeight) {
        $('.bob').hide();
        $('.hide-me').show(); 
  }
  else {
        $('.bob').show();
        $('.hide-me').hide();
  }

});

http://codepen.io/anon/pen/mWmPJR