Липкий заголовок при смещении прокрутки Javascript: есть ли более простой способ? - PullRequest
Новая
       67

Липкий заголовок при смещении прокрутки Javascript: есть ли более простой способ?

0 голосов
/ 23 октября 2019

У меня есть веб-сайт WordPress, где я использую конструктор страниц Elementor (localhost), но я хочу иметь более продвинутые вещи без использования плагинов. Я хочу иметь липкий заголовок, который смещается на 30 30 30 0 px, прокручивая страницу вниз. (напр .: https://www.jorik.com/);

Я нашел надежный способ сделать это, используя код ниже. Я создал липкий заголовок в Elementor, также давая CSS ID и CSS-классы как «mheader», таким образом я могу ссылаться на элемент в коде и плагине.

1. Мой вопрос заключается не в том, чтобы быть программистом, где и как я должен определить свой CSS, когда я также использую JavaScript? Как я должен ссылаться на CSS?

2. В настоящее время я использую плагин Wordpress «Header and Footer script» для запуска моего скрипта, но я хотел бы добавить код вфункция дочерних тем. Я создал файл script.js в папке js. Как мне ссылаться в файле fuctions.php на скрипт в scripts.js?

3. Возможно ли иметь несколько реализованных условий / стилей после IF в JavaScript? Пример: document.getElementById ("mheader"). Style.marginTop = "30px";.style.marginLeft = "30px";?

Я также пытался добавить в functions.php. С плагином работает, но я уверен, что что-то не так с этим методом, потому что иногда работает, иногда нет.

Это добавлено в functions.php дочерней темы, и в настоящее время я не использую: 

function scrollFunction() {
wp_enqueue_script( 'scrollFunction', get_template_directory() . '/js/script.js', array('jquery'), true);
}

add_action('wp_enqueue_scripts', 'scrollFunction');

Это в / js /Файл script.js, и он работает, только вставляя плагин Wordpress: 

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
    document.getElementById("mheader").style.marginTop = "30px";
  } else {
    document.getElementById("mheader").style.marginTop = "0px";
  }
  if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
    document.getElementById("mheader").style.marginLeft = "30px";
  } else {
    document.getElementById("mheader").style.marginLeft = "0px";
  }
  if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
    document.getElementById("mheader").style.marginRight = "30px";
  } else {
    document.getElementById("mheader").style.marginRight = "0px";
  }
  if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
    document.getElementById("mheader").style.opacity = "0.9";
  } else {
    document.getElementById("mheader").style.opacity = "1";
  }

}

Вот как он смещается: ПРАВОЕ ПОЛЯ НЕ РАБОТАЕТ

...