Aggiungi classe quando pagina di scorrimento portata a id specifico

Question

ho un Id in un div <div id="Section1"> abc </div> e collegamento <a id="link" href="#Section1">Section1</a>

Domanda: Quando ho scorrere la pagina e pagina raggiungibile a id #Section1 una classe dovrebbe essere aggiungere nel link, Link vorrei <a id="link" href="#Section1" class="ok">Section1</a>

Answer 1

È possibile utilizzare in questo modo:

$(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 

Vedere la documentazione per toggleClass.

Answer 2

Se qualcuno cerca una bella libreria, di solito uso waypoints.js + inview per questo tipo di evento di scorrimento. Esso fornisce un bel API per sapere quando gli elementi entrano ed escono, ecc

codice Esempio:

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

Si richiede:

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