jquery - 使用jquery不断检查元素是否具有类

Question

我正在使用 StickyJS 在我的 WordPress 网站上创建一个粘性 header 。我已正确地将脚本排入队列，并且即时贴工作正常。

我想要实现的是不断检查我为粘性设置的导航元素是否有一个名为“is-sticky”的类，如果是，则更改一些 CSS。

这是我已经有了的代码:

function stickyInit($)
{
$("#site-navigation").sticky({topSpacing:0});

window.setInterval(check_sticky,500);

function check_sticky(){
    if($("#site-navigation-sticky-wrapper").hasClass("is-sticky")){
        console.log ("Do Something");
    }
}
}

jQuery(document).ready(function ($) {
stickyInit($);
});

这是我排队将导航设置为粘性的文件中的所有代码。

正如您所看到的，我已经使用 setInterval 尝试创建一个循环来不断测试“#site-navigation-sticky-wrapper”元素以查看它是否具有上面提到的类。

此代码有效，我在 Firebug 控制台中收到消息，但我只收到一次而不是重复收到。

所以我的问题是，如何不断测试这个元素以查看它是否具有“is-sticky”类，以便我可以在它具有“is-sticky”类时替换导航CSS？

此外，当元素上未设置“is-sticky”类时(在我滚动回顶部之后)，如何将导航设置回其原始位置？或者无论如何它都会这样做？

Answer 1

检查this fiddle - 当“is-sticky”类处于事件状态时，它会重复触发，并且当您滚动到停止位置时，导航位置会自动恢复到之前的状态。

// Your code
function stickyInit($){

    $("#site-navigation").sticky({topSpacing:0});

        function check_sticky(){
            if ( $("#site-navigation-sticky-wrapper").hasClass("is-sticky") ) {
                console.log ("Do Something");
            }
        }

    window.setInterval(check_sticky,500);
}

jQuery(document).ready(function ($) {

    stickyInit($);

});