Использование Headroom.js с WordPress

Question

Я хотел бы использовать headroom.js на своем сайте, чтобы иметь возможность скрывать заголовок при прокрутке вниз и снова отображать его при прокрутке вверх. Я использую WordPress.

Я попытался поместить файл js в папку темы и вызвать его с functions.php, но он, похоже, не работал, поэтому вместо этого я использую этот плагин: https://twd.wordpress.org/plugins/headroomjs/.

У меня есть следующее в дополнительном CSS:

.headroom {
transition: transform 200ms linear;
}

.headroom--top .x-navbar {
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
}
.sub-menu ul li{
 color: #ddd !important;
}

.headroom--top .x-navbar a{
  color: #fff !important;
}

.headroom--top .x-navbar .desktop .sub-menu a{
  color: black !important;
}

.headroom--not-top .x-navbar {
    background-color: #fff;
}

.headroom {
  transition: transform 200ms linear;
}

.headroom--pinned {
    transform: translateY(0%);
}

.headroom--unpinned {
  transform: translateY(-100%);
  webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.headroom {
  position: fixed;
  z-index: 12;
  right: 0;
  left: 0;
  top: 0;
  webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.masthead {
height:0px;
}

Цвет заголовка меняется при прокрутке вниз, но он все еще фиксирован и не исчезает при прокрутке вниз. Что я делаю неправильно?

Спасибо!

Answer 1

Вам нужно либо применить классы к вашим шаблонам, либо использовать плагин.

Смотрите документацию, чтобы исправить вашу установку: http://wicky.nillia.ms/headroom.js/

В частности добавьте идентификатор или элемент данных в ваш:

<!-- selects $("[data-headroom]") -->

или же

<header id="header">

И поставьте js в функции php, он должен вызвать сам себя; если нет, вам нужно добавить вызов документа в шаблон нижнего колонтитула вашей темы.

Плагин WordPress не обновлялся 3 года, поэтому я не рекомендую его, но вы можете посмотреть его и сравнить с вашей установкой, чтобы исправить это.,