Как изменить lo go меню, если прокрутить вверх на CSS? - PullRequest
Новая
       34

Как изменить lo go меню, если прокрутить вверх на CSS?

0 голосов
/ 11 марта 2020

Вот мой сайт http://tapash.atwebpages.com/

Как вы можете видеть, мой lo go белый и становится невидимым при прокрутке вверх. Как я могу указать lo go на CSS, когда прокручиваем вверх страницу и меню становится липким? У меня есть другой цвет lo go, который я хотел бы поставить там. Спасибо

1 Ответ

1 голос
/ 11 марта 2020

Я видел, что вы уже используете jQuery на вашем сайте. Это делает его очень простым в реализации.

Дайте вашему изображению идентификатор для JavaScript: 

<img src="LOGO_WHITE" id="test" />

Выполните функцию при прокрутке: 

$(window).scroll(function (event) {
    ...
});

При прокрутке (ваш заголовок становится белым), нужно установить другое изображение: 

$("#test").attr("src", "LOGO_BLACK");

Но теперь проблема в том, что lo go постоянно черный. Вы должны установить белый lo go снова, когда пользователь прокручивает вверху: 

if($(window).scrollTop() <= 0) {
    $("#test").attr("src", "LOGO_WHITE");
}

Ваша функция должна выглядеть следующим образом: 

$(window).scroll(function (event) {
    if($(window).scrollTop() <= 0) {
        $("#test").attr("src", "LOGO_WHITE");
    } else {
        $("#test").attr("src", "LOGO_BLACK");
    }
});

Пример для JSFiddle: https://jsfiddle.net/18v9d5eq/1/

Похоже, вы используете шаблон из Drupal. Если вы не знакомы с веб-технологиями, мое решение, приведенное выше, является самым простым. Самым чистым решением было бы включить оба изображения (белое и черное) в заголовок, а затем просто установить видимость с помощью display: hide/block.

...