jquery - 到达 div 时获取活动菜单

Question

我有一个带有固定标题和菜单的单页网站。现在我想将菜单从主页（它开始的地方）更改为联系，当它到达网站的联系部分时。有没有办法做到这一点？

如果有人能指出我正确的方向，

亲切的问候

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');
    }
 });