Доброго времени суток!
Есть один вопрос к знатакам..
Сделал я фиксированое меню с якорями, но есть проблема:
Когда я скролю вниз, у меня к прозрачному меню, то есть начальное меню в шапке (на слайдере, если точнее быть), прописывается фон синего цвета.
Но, когда я перезагружаю страницу, у меня фон опять прозрачного фона, хотя я нахожусь не на начальной секции (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)");
}
});
Комментариев нет:
Отправить комментарий