Trigger event when user scroll to specific element - with jQuery

javascript

event-listening

scrolling

jquery

byAlex Kataev·Jan 6, 2025

To trigger an event when scrolling to a specific element in jQuery, use $(window).scroll() and compare $(element).offset().top with the scroll position:

// Grabbing the popcorn as you start the scrolling show…
$(window).scroll(function() {
    // Let's get some measurements here 
    var windowHeight = $(window).height();
    var elementTop = $('#yourElement').offset().top;
    var viewportTop = $(this).scrollTop();

    // The climax! Our element walks into the view!
    if (viewportTop + windowHeight >= elementTop) {
        // Cue the dramatic music! 
        $('#yourElement').fadeIn();
    }
});

// And…the curtain falls.

Replace '#yourElement' with the ID of your target element. It's show time! 🎩

Detailed explanation and optimization

Event binding and throttling

To keep track of the user's stroll down your webpage, we attach a scroll event to the window.

// Defining a throttle function, like a good director knowing when to cut.
var throttleScroll = _.throttle(function() {
    // All the scrolling action happens here...
}, 100);

// Cue the action scene!
$(window).on('scroll', throttleScroll);

Element visibility and activation offset

Checking whether our star (element) is in the spotlight (viewport) requires calculating distances right:

// The anticipation…
var activation_offset = 100;
var elementOffset = $('#yourElement').offset().top - activation_offset;

// Drum-roll, please…
if (viewportTop + windowHeight > elementOffset) {
    // TA-DAAAA!  
    // (Put your function here)
}

Detaching event listener post performance

Like a stage director, once our star has finished the performance, we call it a day!

// And... Clear!
$(window).off('scroll', throttleScroll);

Library to the rescue

Utilities like Waypoints or the jQuery inview plugin are like those efficient stage hands, managing our scrolling events like a pro.

Scroll till the end, but no further!

For plays with multiple acts (scroll events), make sure our cues don't go haywire when the curtain falls (reaches the end of the page).

Special scenarios

Trigger halfway through

For a more dramatic performance, sometimes, triggering an event halfway on the screen provides a better user experience.

For dynamic elements

Like improv in theatre, for dynamically loaded content, your scroll event listener needs to be improvised on the spot (rebuilt) to include new elements.

Cross-browser compatibility

For all the browsers in the audience, consider using window.pageYOffset as an alternative to scrollTop.

Ensure every actor gets their cue

If you're directing a mega-production with multiple actors (elements), you might want to set up individual cues (scroll checks) for each:

// Here comes our Ensemble Cast!
$('.elements').each(function() {
    // Preparing for the scene…
    var elementTop = $(this).offset().top - $(window).height();

    // Lights, Camera, Action!
    if ($(window).scrollTop() >= elementTop) {
        $(this).fadeIn();
        // or conduct an epic monologue (any other event)
    }
});