jQuery的隱藏/顯示在滾動功能不工作始終

Question

我有移動到頂部上滾動的引導固定導航欄。在上面是一個搜索欄，我想要加載顯示，然後滾動它隱藏並出現在菜單欄上。我有它與一些jQuery的工作，但它不工作。它並不總是改變狀態，一旦它出現在菜單欄上，如果你繼續滾動它就會消失。這裏是我的 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>

Answer 1

請mouswheel刪除您的活動，如果您滾動比.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