Question

我希望在滚动时在屏幕上显示该元素时为其添加类：

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

我希望在滚动或网页重新加载后按钮在屏幕上显示时，将类添加到'btn-default'。

Answer 1

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

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

Answer 2

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

<强> JSFiddle

这是在文档准备好和滚动到元素时添加类的片段。

＆＃13;

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

＆＃13;

.red {
  background: red;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

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

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

在html元素在屏幕上可见时添加类

3 个答案: