jquery hide/show function on scroll not working consistently

I have a bootstrap fixed navbar that moves to the top on scroll. Above it is a search bar that I want to display on load and then on scroll it hides and appears on the menu bar. I have it working with some jquery but it doesn't work well. It doesn't always change states and once it appears on the menu bar if you continue to scroll it disappears off it. here is my codepen: 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>

Answers 1

  • Please remove your event on mouswheel and add this code this will hide/show if you scroll more than .masthead height

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


Related Articles