toggleClass when specific section is on screen
This question already has an answer here:
What you want to do is to add the class if scroll + the offset of your h3 is greater than the offset of the section and remove it if scroll + the offset of your h3 is greater than the offset of the section + it's height.
Check out this: https://jsfiddle.net/Lp27vuu4/4/
Waypoints is a popular plugin to trigger events on scroll.
http://imakewebthings.com/waypoints/
Place the waypoints js file in your project and link to it. Then do something like this below in your jQuery file
function toggleClassFunction() {
$('nav').toggleClass('light-mode');
}
var waypoint = new Waypoint({
element: document.getElementById('id-of-element-when-scrolled-to-event-triggers'),
handler: function(direction) {
if (direction === 'down') {
toggleClassFunction(); // the function that runs
this.destroy() //runs the function once
}
else {
}
},
offset: 250 //since the event triggers once the element reaches the top of the page, we
//sometimes need an offset. so in this example, when the element is 250px from
//the top of the page, the even triggers
});
上一篇: 弹出一个新窗口后滚动顶部。