jquery - div に到達したときにアクティブなメニューを取得する

Question

ヘッダーとメニューが固定されたこの 1 ページの Web サイトがあります。ここで、メニューをホーム (開始場所) から連絡先に変更したいと考えています。とにかくこれを行うことはありますか？

誰かが私を正しい方向に向けることができれば、

敬具

Answer 1

「...正しい方向に向けてください」

DIRECTION DEMO

$(window).scroll()関数で -を使用してウィンドウのスクロール位置を取得scrollTop()し、var. 要素の .offset().top;一致を確認するよりも、そのvar値 + 余分な量の px (私は「100」を使用しました) - そしてその要素を取得しますdata-title。

HTML:

 <div id="header">
   <h1></h1>
 </div>

  <div class="page" data-title="Home"> home page</div>
  <div class="page" data-title="About"> bout page</div>
  <div class="page" data-title="Info"> info page</div>
  <div class="page" data-title="Contact"> contact page</div>

CSS:

#header{     
  position:fixed;
  width:100%;
  background:#0ff;
  padding:15px;    
}
.page{     
  padding:20px;
  padding-top: 140px;
  background:#eee;
  margin-bottom:10px;
  min-height:800px;    
}

jQuery:

$(function(){ // DOM ready shorthand

    var $page = $('.page');

    function getTitle(){ 
        var winScrollTop = $(window).scrollTop();       
        $page.each(function(){
            var pageOffs = $(this).offset().top,
                title = $(this).data('title');
            if( winScrollTop > pageOffs-100){               
                     $('h1').text( title );
            }
        });
    }
    getTitle();

    $(window).scroll( getTitle );

});

Answer 2

次のようなものを試すことができます：

$(window).scroll(function() {
    var scrollTop = $(window).scrollTop(),
    divOffset = $('#contact').offset().top,
    dist = (divOffset - scrollTop);
    if (dist == 0) {
      $('.menuItem').text('contact');
    }
 });