到达div时获取活动菜单

Question

我有这个单页网站，带有固定的标题和菜单。现在我想将菜单从家（它开始的地方）更改为联系，当它到达网站的联系方式时。反正有吗？

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

亲切的问候

Answer 1

“......指出我正确的方向”

的 DIRECTION DEMO

在 $（窗口）.scroll（）函数上 - 使用scrollTop()获取窗口滚动位置并存储到var。 然后检查元素的 .offset().top;匹配var值+一些额外数量的px（我使用“100”） - 并获取该元素data-title。< / p>

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