javascript - 当另一个元素滚动到视口(viewport)中时向按钮添加类

Question

我有一个静态按钮和一个滚动元素。当可滚动元素进入浏览器视口(viewport)时，我希望静态按钮获得一个类(例如下划线)。我现在有了这个，但它不起作用:

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

});

任何帮助将不胜感激

Answer 1

如果您想将类添加到输入类型的元素，那么下面的代码将起作用。

jQuery(window).scroll(function() {
  element = jQuery('#my-scrolling-element');
  if (isScrolledIntoView(element) === true) {
    jQuery('#my-static-button')
    //if the type of element is input then it will work.
    $("input[id^='my-scrolling-element_']").addClass('my-class');
  } else {
    jQuery('#my-static-button').removeClass('my-class');
  }
});

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