页脚中的Javascript未在Wordpress中加载

debugcn 发表于 Dev

安全

我有以下代码用于在Wordpress网站上隐藏和显示导航栏：

$(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 800) {
        $("#pn-navigation-bar").fadeIn();
    } else {
        $("#pn-navigation-bar").fadeOut();
    }
});


var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos < currentScrollPos) {
        document.getElementById("pn-navigation-bar").style.opacity = 0;
        document.getElementsByClassName("readingProgressbar")[0].style.display = "block";
    } else if (prevScrollpos > currentScrollPos) {
        document.getElementById("pn-navigation-bar").style.opacity = 1;
        document.getElementsByClassName("readingProgressbar")[0].style.display = "none";

    }
    prevScrollpos = currentScrollPos;
};

以及以下CSS，以防止其在首次加载页面时加载：


#pn-navigation-bar {
     position: fixed;
  top: 0;
  width: 100%;
  transition: all .3s ease-in-out;
 display: none;
}

理想情况下，应该在用户向下滚动时隐藏下面显示的导航栏，并在检测到向上滚动时显示它。

但是，如您所见，如果您访问此处的网站，则不会发生。直到几天前，它都可以正常工作，但我不知道出了什么问题。我一直在优化网站的速度（JS / CSS最小化），但是我怀疑这会受到影响。我该怎么做才能解决此问题？

安全

根据用户@mplungjan和@Howard E的建议，Wordpress运行jQuery.noConflict。为防止与其他JS库冲突，Wordpress不会将其识别$为JQuery代码，通常期望Jquery代替传统的$

要解决此问题，最简单的方法是映射$到JQuery。

根据本文，此代码为：

(function($) {
    
//Insert Code Here
    
})( jQuery );

要更正错误，代码将变为：

<script>
(function($) {
    
    $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 800) {
        $("#pn-navigation-bar").fadeIn();
    } else {
        $("#pn-navigation-bar").fadeOut();
    }
});


var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos < currentScrollPos) {
        document.getElementById("pn-navigation-bar").style.opacity = 0;
        document.getElementsByClassName("readingProgressbar")[0].style.display = "block";
    } else if (prevScrollpos > currentScrollPos) {
        document.getElementById("pn-navigation-bar").style.opacity = 1;
        document.getElementsByClassName("readingProgressbar")[0].style.display = "none";

    }
    prevScrollpos = currentScrollPos;
};  
})( jQuery );
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。