スクロールのjquery hide/show関数が一貫して動作しない

Question

私はスクロールの上に移動するブートストラップ固定navbarを持っています。上には、ロード時に表示したいスクロールバーと、スクロール時にはメニューバーに隠れて表示される検索バーがあります。私はいくつかの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