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

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

2 голосов
/ 02 апреля 2019

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

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

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

Что я знаю:

Мне нужно сделать класс в CSS, т.е..changeColor

И вызвать это изменение в 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

1 Ответ

0 голосов
/ 02 апреля 2019

Прежде всего вы должны добавить идентификатор для своей кнопки, чтобы 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')
      }
   });
});

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

...