'adding class to button when another element is scrolled into the viewport

I have one static button and one element which scrolls. When the scrollable element enters the browser viewport, I want the static button to get a class (e.g. underline). I have this now, but it doesn't work:

function isScrolledIntoView(elem) {
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

jQuery(window).scroll(function () {
    jQuery('#my-scrolling-element').each(function () {
        if (isScrolledIntoView(this) === true) {
            jQuery('#my-static-button').addClass('my-class');
        }
    });

});

Any help would be much appreciated



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source