Изменить фон заголовка при прокрутке в WordPress двадцать четырнадцать

#javascript #css #wordpress #navigation #onscroll

#javascript #css #wordpress #навигация #onscroll

Вопрос:

Это то, что я хотел бы видеть в качестве результата в теме WP 2014:

http://codepen.io/Paulie-D/pen/ekKru

Я попытался применить то же самое, добавив следующий js-файл и css-код в мою дочернюю тему:

 jQuery(document).ready(function($){
  jQuery(window).bind('scroll', function($) {
    var distance = 50;
    if ($(window).scrollTop() > distance) {
      $('header').addClass('scrolled');
    }
    else {
      $('header').removeClass('scrolled');
    }
  });
});  
 .scrolled {
  background: #bada55;
}  

Кроме того, я добавил следующее в свой functions.php в дочерней теме:

 function my_custommenu_tf_child() {
	if (!is_admin()) {
	if (is_front_page()) {
	wp_enqueue_script( 'my_Custommenu', get_stylesheet_directory_uri() . '/js/mycustommenu.js', '', '1.0', true );
	}
	}
}

add_action('wp_enqueue_scripts', 'my_custommenu_tf_child');  

На самом деле не сработало … Я не профессиональный разработчик, поэтому вместо того, чтобы ссылаться на возможные решения, я был бы признателен, если бы вы могли вставить правильный код, чтобы я мог сравнить и посмотреть, что именно было не так. Спасибо!

Ответ №1:

У вас есть приведенный ниже код в .js файле?

.scrolled {
background: #bada55;
}

Если у вас есть, вам нужно переместить его в какой .css -либо файл, а также связать его в вашем functions.php

Комментарии:

1. У меня это есть в CSS, конечно … не уверен, однако, как это должно быть связано с functions.php ? Можете ли вы предоставить подробности / код?

2. Здесь вам все объяснено (с кодами): codex.wordpress.org/Child_Themes

3. Вероятно, более простым способом добавления пользовательского css будет использование этого плагина: pl.wordpress.org/plugins/simple-custom-css

4. Хорошо, я неправильно понял ваш комментарий. Да, я использую дочернюю тему, я добавил вышеупомянутый css в свой пользовательский файл css, который связан с functions.php . В любом случае, с CSS у меня все в порядке, проблема должна быть либо в коде javascript, либо в том, как я пытаюсь заставить его работать с помощью php-файла functions.