Javascript 当html元素在屏幕上可见时，在其上添加类

我想在滚动时在屏幕上看到元素时向元素添加类：

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

你好

---

当按钮在滚动后显示在屏幕上或页面重新加载时，我想将类添加到

'btn-default'

中。

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

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

---

您必须使用jquery

$（element）.is（':visible'）

来检查元素在HTML文档中是否可见

这是一个代码段，当文档准备就绪并滚动到元素时，它将在其中添加一个类

$（函数（）{
如果（$（'#testElement'）。是（':visible'））{
$（'#testElement'）.addClass（'red'）；
}
});
$（窗口）.on（'scroll'，function（）{
var$elem=$（“#testElement1”）；
变量$window=$（window）；
var docViewTop=$window.scrollTop（）；
var docViewBottom=docViewTop+$window.height（）；
var elemTop=$elem.offset（）.top；
var elemBottom=elemTop+$elem.height（）；
如果（elemBottom
.red{
背景：红色；
}

你好
一些内容
你好
通常您可以在代码下面添加和删除类，但首先您可以添加（包括）任何jquery min js

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

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

能看得见吗？你能解释一下它是如何变得可见的吗？我的意思是当按钮通过滚动在屏幕上变得可见时，或者当页面重新加载时，这有什么意义？你为什么需要这个？提供使用示例。@YeldarKurmangaliyev，可能是一些动画！您可以使用
onscroll
和
onload
事件来实现这一点。我根据@Ravimallya修改了我的答案。我最初没有使用“在卷轴上”，因为问题没有说此人需要元素在卷轴上可见。：）OP没有在问题中添加它，但在评论中他提到了。我自己补充道。