當達到div時獲得活動菜單

Question

我有一個帶有固定標題和菜單的頁面網站。現在我想從家中（開始的地方）更改菜單進行聯繫，當它到達網站的聯繫人部分時。無論如何要做到這一點？

如果有人能在正確的方向指向我，

親切的問候

Answer 1

「......點我在正確的方向」

DIRECTION DEMO

上$（窗口）.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'); 
    } 
});