Здрасвуйте! Есть хедер, который имеет прозрачный фон. Как только пользователь начинает скролить страницу вниз - хедеру даётся цвет:
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 40) {
$(".main-header").css("background" , "rgba(255,255,255,1)");
$(".main-header").css("box-shadow" , "0 0 12px rgba(0,0,0,.2)");
}
else{
$(".main-header").css("background" , "rgba(255,255,255,0)");
$(".main-header").css("box-shadow" , "0 0 0 rgba(0,0,0,0)");
}
})
})
</script>
Однако, если обновить страницу, или обновить страницу после перехода по якорной ссылке - цвет хедера принимает значение по умолчанию, то есть прозрачный.
Вопрос: можно ли как-то исправить данную ситуацию?
Нужно оформить смену цвета отдельной функцией и запускать ее при скролле и при загрузке страницы.
function changecolor() {
var scroll = $(window).scrollTop();
if (scroll > 40) {
$(".main-header").css("background" , "rgba(255,0,255,1)");
$(".main-header").css("box-shadow" , "0 0 12px rgba(0,0,0,.2)");
}
else{
$(".main-header").css("background" , "rgba(255,0,255,0)");
$(".main-header").css("box-shadow" , "0 0 0 rgba(0,0,0,0)");
}
}
function function2() {
//еще одна функция выполняющаяся при скролле
};
function function3() {
//еще одна функция на загрузку страницы
};
$(document).ready(function(){
//это тест для начальной прокрутки стриницы
//window.scrollBy в вашем варианте не нужен
window.scrollBy(0,100);
changecolor();
function3();
$(window).scroll(function(){
changecolor();
function2();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header">
<p>
123
<p>
123
<p>
123<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
<p>
123
</div>
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Интересует именно функция wrapChain, сделал что-то похожее но не робит
Здравствуйте, мне по API приходит массив с объектами, в каждом объекте есть ключ priceНужно сделать фильтрацию по убыванию и возрастанию цены