Как сделать автоматическую проверку на наличие класс у элемента?

Question

[Сергей]

Здравствуйте, использую плагин one-page-scroll.js. При пролистывании страницы к секции добавляется класс "active" каждая секция имеет индивидуальный класс например: "page-1", "page-2" и тд.

Как сделать проверку есть ли у секции page-11 класс "active". Пробовал так:

$(document).ready(function() {
            if($(".page-11").hasClass("active")) {
		        alert("У элемента есть класс active!");
	        }
        });

Не помогло, работает только при обновлении страницы когда открыт слайд ".page-11". Как реализовать чтобы проверка срабатывала при каждом пролистовании слайда?

Comments

[Vadim Bogomazov]

Этот?

В api есть коллбэк функция afterMove: function(index) {}, воспользуйтесь ей.

Answer 1

[Artem Ivanov]

документ реди проверяет есть ли класс в момент загрузки страницы
нужно создать лисстнер на скролл и слушать его, когда прокрутка достигнет нужного блока и класс добавится, тогда уже и алерт вылетит)

Answer 2

[Maxim Kirshin]

Посмотрите документацию вашего плагина, наверняка там есть события, к которым можно привязаться.

$(".main").onepage_scroll({
   sectionContainer: "section",     // sectionContainer accepts any kind of selector in case you don't want to use section
   easing: "ease",                  // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
                                    // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
   animationTime: 1000,             // AnimationTime let you define how long each section takes to animate
   pagination: true,                // You can either show or hide the pagination. Toggle true for show, false for hide.
   updateURL: false,                // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
   beforeMove: function(index) {},  // This option accepts a callback function. The function will be called before the page moves.
   afterMove: function(index) {},   // This option accepts a callback function. The function will be called after the page moves.
   loop: false,                     // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
   keyboard: true,                  // You can activate the keyboard controls
   responsiveFallback: false,        // You can fallback to normal page scroll by defining the width of the browser in which
                                    // you want the responsive fallback to be triggered. For example, set this to 600 and whenever
                                    // the browser's width is less than 600, the fallback will kick in.
   direction: "vertical"            // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".  
});

в данном случае, вас должны интересовать beforeMove или afterMove