当它在屏幕上可见时在 html 元素上添加类答案

【问题标题】：Add class on html element when it gets visible on screen当它在屏幕上可见时在 html 元素上添加类
【发布时间】：2015-12-14 06:43:32
【问题描述】：

我想在元素滚动时在屏幕上可见时添加类：

<button class='btn btn-default' >
   Hello
</button>

当按钮在滚动后或页面重新加载时在屏幕上可见时，我想将类添加到 'btn-default'。

【问题讨论】：

变得可见 ?你能解释一下它是如何变得可见的吗？
我的意思是当按钮通过滚动或页面重新加载时在屏幕上可见时
什么意思？你为什么需要这个？提供使用示例。
@YeldarKurmangaliyev，可能是一些动画！
你可以使用onscroll和onload事件来实现这个..

标签： javascript jquery scroll

【解决方案1】：

尝试可见选择器，如下所示：

$(window).on('scroll', function(){
    if ($(".btn").is(':visible')){
        $(".btn").addClass("btn-default");
    }
});

【讨论】：

我根据@Ravimalya 修改了我的答案。我最初没有使用“滚动”，因为问题并没有说该人需要该元素在滚动时可见。 :)
OP 没有添加它，但在评论中他提到了。所以添加了我自己的答案。

【解决方案2】：

您必须使用 jquery $(element).is(':visible') 来检查一个元素在 HTML 文档中是否可见。

JSFiddle

这是 sn-p，当文档准备好并滚动到元素时，它将添加一个类。

$(function() {
  if ($('#testElement').is(':visible')) {
    $('#testElement').addClass('red');
  }
});
$(window).on('scroll', function() {
  var $elem = $('#testElement1');
  var $window = $(window);

  var docViewTop = $window.scrollTop();
  var docViewBottom = docViewTop + $window.height();
  var elemTop = $elem.offset().top;
  var elemBottom = elemTop + $elem.height();
  if (elemBottom < docViewBottom) {
    alert('hi')
    $('#testElement1').addClass('red');
  }
});

.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="testElement" class="btn btn-default">
  Hello
</button>
<div style="height:400px">Some content</div>
<button id="testElement1" class="btn btn-default">
  Hi
</button>

【讨论】：

【解决方案3】：

通常你可以在代码下面添加和删除类，但首先你添加（包含）任何 jquery min js

Add class: $('.Yourclassname').addClass('addclassname'); 

Remove Class: $('.Yourclassname').removeClass('removeclassname');

【讨论】：