スクロールとクラスのときにdivを表示

Question

2つのサイドページ（nav1とnav2）とdivの2つの異なる内容を持つ1ページのアプリケーションがあります。今私は下にスクロールしてclass="content2"があるポイントに達すると、id="nav2"が表示されます。次に、class="content1"がそこにスクロールすると、id="nav1"が表示されます。デフォルトではnav1が表示されます。

ここで少し

問題を理解するためにいくつかの写真だここで私はcontent1にいる絵です。

そしてここcontent2で

、ここではサンプルhtml fiddleです。

ありがとうございます！

Answer 1

あなたは、ドキュメントのスクロール位置の変化を検出する$(document).scroll(function()を使用することができます。 scrollTop()メソッドはドキュメントの現在の最上位位置を示し、position()は位置値を含むオブジェクトを返すメソッドであり、topは私たちが望むものです。現在のドキュメントのトップポジションとdivトップポジションを比較したいだけです。

if($(this).scrollTop()>=$('.content2').position().top){これは、現在のドキュメントの位置がクラス名.content2のdivの最上部にあることを意味します。今度はnav2を表示し、nav1を非表示にすることができます。それ以外の場合はnav1を示し、nav2

$(document).scroll(function() { 
    if($(this).scrollTop()>=$('.content2').position().top){ 
     $("#nav2").show(); 
     $("#nav1").hide(); 
    } 
    else { 
     $("#nav1").show(); 
     $("#nav2").hide(); 
    } 
    }) 

フィドル隠す：https://fiddle.jshell.net/tintucraju/rjjrmhvt/5/

に注意してください。親が比較的配置されている場合position().topは、上から親に計算されます。トップ値にわずかな変化があります。 $(this).scrollTop()にオフセットを加えて調整し、希望の位置に調整します。

フィドル：https://fiddle.jshell.net/tintucraju/rjjrmhvt/6/

Answer 2

私は両方のコンテンツ領域の高さをとり、オフセットとしてウィンドウ高さの1/3を使用しました。必要に応じて変更できます。

 var content1 = $(".content1").position(); 
 
      content2 = $(".content2").position(); 
 
      offset = $(window).height()/3; 
 

 
     $(document).scroll(function() { 
 
     var y = $(this).scrollTop(); 
 

 
     if (y >= content2.top - offset){ 
 
      $("#nav2").show(); 
 
      $("#nav1").hide(); 
 
     }else{ 
 
      $("#nav2").hide(); 
 
      $("#nav1").show(); 
 
     } 
 
     });

 .container{ 
 
     max-width: 1000px; 
 
     margin: 0 auto 40px auto; 
 
min-height: 800px; 
 
     overflow: hidden; 
 
     clear: both; 
 
     } 
 
     #nav1, #nav2{ 
 
     width: 25%px; 
 
     float: left; 
 
     min-height: 200px; 
 
     border: 2px solid #8a6343; 
 
     position: fixed; 
 
     min-width: 100px; 
 
     } 
 
     #nav2{ 
 
     top: 0; 
 
     display: none; 
 
     } 
 
     .content1, .content2{ 
 
     min-width: 200px; 
 
     width: 60%; 
 
     float: right; 
 
     min-height: 230px; 
 
     border: 2px solid #440044; 
 
     } 
 
     .content2{ 
 
     margin-bottom: 200px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <div id="nav1">nav one</div> 
 
     <div class="content1">Content area 1</div> 
 
    </div> 
 
    <div class="container"> 
 
     <div id="nav2"> nav two</div> 
 
     <div class="content2"> content area 2</div> 
 
    </div>