當頁面滾動達到特定ID

Question

我有一個ID添加類在一個div <div id="Section1"> abc </div>和紐帶<a id="link" href="#Section1">Section1</a>

問：當我滾動頁面和頁面範圍的ID #Section1類應在鏈接添加，鏈接想<a id="link" href="#Section1" class="ok">Section1</a>

Answer 1

你可以使用這樣的：

$(window).scroll(function (event) { 
    var scroll = $(window).scrollTop(); 
    $('#link').toggleClass('ok', 
    //add 'ok' class when div position match or exceeds else remove the 'ok' class. 
     scroll >= $('#Section1').offset().top 
    ); 
}); 
//trigger the scroll 
$(window).scroll();//ensure if you're in current position when page is refreshed 

請參閱該文檔爲toggleClass。

Answer 2

如果有人正在尋找一個不錯的庫，我通常使用waypoints.js + inview這種類型的滾動事件。它提供了一個很好的API，知道什麼時候元素進入和離開，等

示例代碼：

var inview = new Waypoint.Inview({ 
    element: $('#inview-example')[0], 
    enter: function(direction) { 
     notify('Enter triggered with direction ' + direction) 
    }, 
    entered: function(direction) { 
     notify('Entered triggered with direction ' + direction) 
    }, 
    exit: function(direction) { 
     notify('Exit triggered with direction ' + direction) 
    }, 
    exited: function(direction) { 
     notify('Exited triggered with direction ' + direction) 
    } 
}); 

它要求：

<script src="/path/to/lib/jquery.waypoints.min.js"></script> 
<script src="/path/to/shortcuts/inview.min.js"></script>