Я хочу добавить класс к элементу, когда он становится видимым на экране при прокрутке:

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

Я хочу добавить класс в 'btn-default', когда кнопка становится видимой на экране после прокрутки или когда страница перезагружается.

14
Ilyas karim 14 Дек 2015 в 09:43

3 ответа

Лучший ответ

Попробуйте видимый селектор как в:

$(window).on('scroll', function(){
    if ($(".btn").is(':visible')){
        $(".btn").addClass("btn-default");
    }
});
6
Ilyas karim 4 Окт 2019 в 06:28

Обычно вы можете добавлять и удалять классы ниже кода, но сначала вы добавляете (включаете) любой jquery min js

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

Remove Class: $('.Yourclassname').removeClass('removeclassname');
-6
Digpal Singh 14 Дек 2015 в 12:35

Вы должны использовать jquery $(element).is(':visible'), чтобы проверить, видим ли элемент в документе HTML.

JSFiddle

Это фрагмент, в который он добавит класс, когда документ будет готов и при прокрутке до элемента

$(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>
1
Ravimallya 14 Дек 2015 в 07:58