如何检测javascript中的wordpress管理栏

Question

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

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

由于我的导航栏srcoll隐藏代码是用javascript编写的，当管理栏存在时，我不能使用以前使用的css代码在导航栏顶部添加空格：

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

因此，我想知道如何在javascript中检测WP管理栏的存在，以便使用以下代码在顶部添加空间：

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标签是否包含给定的类：

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