Как определить админ бар WordPress в javascript?

Question

Я использую панель навигации, которая скрывается при прокрутке страниц, и отображается при прокрутке вверх в Wordpress.

Типичная проблема заключается в том, что панель администратора WP оказывается поверх панели навигации.

Поскольку мой скрывающий код navbar srcoll выполнен в javascript, я не могу использовать код css, который использовал ранее, чтобы добавить пробел в верхней части панели навигации при наличии панели администратора:

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

Итак, я хотел бы знать, как я могу обнаружить присутствие админ-панели WP в javascript, чтобы я мог добавить пространство сверху, используя следующий код:

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

Спасибо много, как я долго боролся ...:}!

Answer 1

Для информации я также нашел это решение, чтобы проверить, содержит ли данный тег html данный класс:

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

Answer 2

Панель инструментов администратора имеет идентификатор «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";
}