如何检测 javascript 中的 wordpress 管理栏？

Question

我使用的导航栏在向下滚动页面时隐藏，在 Wordpress 中向上滚动时显示。

典型的问题是 WP 管理栏位于导航栏的顶部。

由于我的导航栏 srcoll 隐藏代码是在 javascript 中编写的，因此当存在管理栏：

body.admin-bar #navbar-section {
  top: 32px;
}

所以我想知道如何检测 javascript 中是否存在 WP 管理栏，以便我可以使用以下代码在顶部添加 space :

    if adminbar present then
document.getElementById("navbar-section").style.top = "32px";
    else
document.getElementById("navbar-section").style.top = "0px";

非常感谢，因为我现在已经苦苦挣扎了很长时间...:} !

Answer 1

管理工具栏的 ID 为 "wpadminbar"。所以你的代码只需要引用这个：

const $wpadminbar = document.getElementById('wpadminbar');
const $navbar_section = document.getElementById('navbar-section');
if ($wpadminbar){
     $navbar_section.style.top = "32px";
} else {
     $navbar_section.style.top = "0px";
}

您也可以使用 Node.contains:


const $wpadminbar = document.getElementById('wpadminbar');
const $navbar_section = document.getElementById('navbar-section');
if (document.body.contains($wpadminbar)){
     $navbar_section.style.top = "32px";
} else {
     $navbar_section.style.top = "0px";
}

Answer 2

有关信息，我还找到了这个解决方案来检查给定的 html 标签是否包含给定的 class:

if (document.body.classList.contains('admin-bar')) { 
      document.getElementById("navbar-section").style.top = "32px";
} else {
    document.getElementById("navbar-section").style.top = "0px";
}

如何检测 javascript 中的 wordpress 管理栏？

How to detect the wordpress admin bar in javascript?

javascript

wordpress

navbar

admin

detection