Я хочу, чтобы кнопка в липком заголовке стала красной при прокрутке вниз

Привет и заранее спасибо за помощь

Я работаю над веб-сайтом Wordpress и использую Elementor и Elementor Pro. У меня в липкой шапке есть кнопка. Когда люди начинают прокрутку вниз, я хочу, чтобы эта кнопка стала красной, а текст стал белым. Постепенно. (Когда цвета были наоборот.)

Теперь я вроде как знаю, как это сделать, но не совсем уверен во всем. Я получил руководство из сообщения на Medium, которое посвящено изменению цвета всей страницы, и я подумал, что могу настроить biut, чтобы настроить таргетинг на кнопку. Я не совсем незнаком с кодированием, но сталкиваюсь с некоторыми несовместимостями. Я добавил код из сообщения Medium ниже.

Что я знаю:

Мне нужно создать класс в CSS, т.е. .сменить цвет

И вызовите это изменение в Javascript.

Я могу добавить CSS в настраиваемую часть CSS виджета в Elementor. Но где мне поместить script.js в остальные файлы? В WordPress есть только файлы .php, в которые я могу войти, и, поскольку я работаю в Elementor, могу ли я разместить его в другом месте?

Также можно ли указать время перехода в CSS, описывающем кнопку, или в CSS, описывающем изменение?

Большое спасибо за то, кто смог прояснить все это для меня. БЛАГОДАРНОСТЬ!

Колин

Начало ситуации:

body {
    background: white;
    transition: 0.3s all;
}

Что должно произойти при прокрутке

.changeColor {
    background: red;
}

Немного Javascript

$(function() {
   $(window).scroll(function () {
      if ($(this).scrollTop() > 50) {
         $(‘body’).addClass(‘changeColor’)
      }
      if ($(this).scrollTop() < 50) {
         $(‘body’).removeClass(‘changeColor’)
      }
   });
});

`

И добавьте немного кода в HTML-документ, который относится к размещенной в Google библиотеке для javascript.


javascript wordpress php css elementor
person ColinKassies    schedule 02.04.2019    source источник
comment
Привет, @Colin, можешь сказать, какой редактор wordpress вы используете?   -  person HUSSAIN    schedule 02.04.2019

Ответы (1)


arrow_upward
0
arrow_downward

прежде всего вы должны добавить идентификатор для своей кнопки, чтобы jquery мог передать это через

теперь создайте класс, который вы добавите в свою кнопку, когда страница прокручивается

.btnChanged{
    color: white;
    background-color: red;
}

Хорошо, теперь создайте элемент файла RAW JS, вы можете добавить его из раздела добавления нового элемента и поместить свой js

    $(function() {
   $(window).scroll(function () {
      if ($(this).scrollTop() > 50) {
         $('#yourId_which_you_gave_to_btn').addClass('btnChanged')
      }
      if ($(this).scrollTop() < 50) {
         $('#yourId_which_you_gave_to_btn').removeClass('btnChanged')
      }
   });
});

надеюсь, это поможет

person HUSSAIN    schedule 02.04.2019
comment
вам нужно добавить имя элемента RAW js, в которое вы можете поместить свои скрипты - person HUSSAIN; 03.04.2019
comment
или вы также можете поместить этот сценарий в свой footer.php или header.php, у них обоих уже есть тег сценария, поместите его в теги сценария, просто не помещайте его в какие-либо функции - person HUSSAIN; 03.04.2019
comment
Спасибо, @HUSSAIN! Но где мне разместить JS-скрипт? - person ColinKassies; 03.04.2019
comment
Ах! Хорошо, я попробую. Огромное спасибо! - person ColinKassies; 03.04.2019
comment
С удовольствием @ColinKassies, надеюсь, это сработает для вас - person HUSSAIN; 04.04.2019