时间戳

首页 > 解决方案 > 当另一个元素滚动到视口中时向按钮添加类

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

问题描述

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

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

});

任何帮助将非常感激

标签： javascriptjquery

解决方案

如果您想将类添加到输入类型的元素，那么下面的代码将起作用。否则请给我一些代码片段。如果对您有帮助，请采纳答案。

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

推荐阅读