Страницы

Поиск по вопросам

понедельник, 10 июня 2019 г.

Цвет фона при скроле

Доброго времени суток! Есть один вопрос к знатакам.. Сделал я фиксированое меню с якорями, но есть проблема: Когда я скролю вниз, у меня к прозрачному меню, то есть начальное меню в шапке (на слайдере, если точнее быть), прописывается фон синего цвета. Но, когда я перезагружаю страницу, у меня фон опять прозрачного фона, хотя я нахожусь не на начальной секции (header), а, например, секция resume
Вопрос: как реализовать прикрепление синего фона, если user будет делать релоад (reload) страницы на конкретном якоре (не в начальной позиции, где прозрачный фон шапки) и js будет добавлять css свойство этого же синего фона?
Возможно есть готовые скрипты, пока не нашел.. решил спросить здесь, возможно кто-то уже такое делал при верстке. Вот код:
$(window).scroll(function(){ if($(window).scrollTop() < 300){ $("#ap-head").css("background","transparent") } else { $("#ap-head").css("background","linear-gradient(to right, #01aed9, #01cec7)") } });
Вот css:
#ap-head{ z-index: 99; position: fixed; top: 0; left: 0; right: 0; width: 100%; background: linear-gradient(to right, #01aed9, #01cec7); line-height: 1; transition: all 0.25s ease; }


Ответ

Вы это делаете при $(window).scroll(function(){. И то же самое должны сделать при загрузке страницы. То есть при $(document).ready(function(){});
$(document).ready(function(){ if($(window).scrollTop() < 300){ $("#ap-head").css("background","transparent") } else { $("#ap-head").css("background","linear-gradient(to right, #01aed9, #01cec7)"); } });

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

Отправить комментарий