Javascript - Добавить класс на свитке не работает Wordpress - PullRequest
Новая
       17

Javascript - Добавить класс на свитке не работает Wordpress

0 голосов
/ 07 октября 2018

В настоящее время я пытаюсь изменить цвет заголовка [id ='site-header'], как только страница начнет прокручиваться вниз.Я пытаюсь добавить класс в заголовок после прокрутки окна более 100px.Я разрабатываю веб-сайт с помощью Wordpress, и по какой-то причине код работает, когда у меня открыт настройщик Wordpress, но иначе он не будет работать.

HTML 

<body class="home-page bp-nouveau home page-template-default page page-id-5 logged-in admin-bar no-customize-support geodir_advance_search geodir-page sd-common sd sd-homepage no-js gd-map-auto">
<div id="ds-container" >
<header id="site-header" class="site-header " role="banner" style="">
<div class="container">

Javascript 

<script type="text/javascript">
jQuery(document).scroll(function( $ ){
if(jQuery(document).scrollTop() > 100) {
   document.getElementById('#site-header').addClass('active');
} else {
        //remove the background property so it comes transparent again (defined in your css)
   document.getElementById('#site-header').removeClass('active');
    }
});
</script>

Есть идеи, почему это может происходить?Ссылка для сайта это .

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

Ниже код должен работать для вас.Замените свой текущий код jQuery / javascript на следующий. 

jQuery(document).ready(function(){
    jQuery(window).scroll(function(){
        var sTop= jQuery(this).scrollTop();
        if(sTop > 100){
            jQuery('#site-header').addClass('active');
        } else {
            jQuery('#site-header').removeClass('active');
        }
    });
})
0 голосов
/ 07 октября 2018

Я вижу по крайней мере 3 проблемы с этим кодом:

1) идентификатор элемента site-header - не #site-header, который является просто селектором CSS.

2) Вы смешиваете jQuery с vanilla JS - что само по себе не является ошибкой, но в объекте, возвращаемом вызовами getElementById, нет метода addClass.Вам нужно либо вызвать classList.add(...) для этого объекта "элемента", либо (проще, так как вы уже используете jQuery) просто использовать jQuery: jQuery('#site-header').addClass('active'); (я подозреваю, что эта путаница с jQuery-или-не-причиной вызвала заблуждение "# "в вашем ванильном JS-коде.

3) Лучше всего оборачивать подобные вещи в функцию обратного вызова, передаваемую в document.ready() jQuery, иначе слушатель события может даже не быть создан.(Я бы предположил, что объект document, вероятно, существует в тот момент, когда выполняется этот код, так что это может не иметь значения, но это все же лучшая практика.)

...