0

基本的に4つの大きなdivである単一ページのWebサイトを構築しています。最初は着陸セクションです。ユーザーがページ ID を下にスクロールすると、about と呼ばれる 2 番目の div の上部からナビゲーション メニューがアニメーション表示されます。そのメニューは、ウィンドウの上部に固定されたままになります。スクロール中に div がウィンドウの上部に達したときに見つける最善の方法は何ですか? これを行うための最善の方法についてのアドバイスは大歓迎です! 基本的なページ構造については、フィドルを参照してください。

http://jsfiddle.net/aartese/3kRVm/11/

  <body>   
   <div class="row"><!--landing section -->
     <div class="col-md-12 landing">Landing</div>
   </div> <!-- /landing section -->
   <div class="row"><!--about section -->
    <div class="col-md-12 about">About</div>
   </div><!-- /about section -->
   <div class="row"><!-- professional profile section -->
    <div class="col-md-12 professional">Professional</div>
   </div><!-- /professional profile section -->
   <div class="row"> <!-- contact section -->
    <div class="col-md-12 contact">Contact</div>
   </div> <!-- /contact section -->    
  </body>
4

4 に答える 4

3

$(window).scrollTop() で div offset().top を確認します。

$(window).scroll(function(){
    if($(window).scrollTop() >= $('#sample').offset().top){
        $('#sample').addClass('black');
    }else{
        $('#sample').removeClass('black');
    }
})

ここにデモがあります:デモ

于 2013-11-04T21:47:18.860 に答える