Изменяющий фон при скроллинге

340
27 марта 2018, 03:11

Здрасвуйте! Есть хедер, который имеет прозрачный фон. Как только пользователь начинает скролить страницу вниз - хедеру даётся цвет:

<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>

Однако, если обновить страницу, или обновить страницу после перехода по якорной ссылке - цвет хедера принимает значение по умолчанию, то есть прозрачный.

Вопрос: можно ли как-то исправить данную ситуацию?

Answer 1

Нужно оформить смену цвета отдельной функцией и запускать ее при скролле и при загрузке страницы.

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>

READ ALSO
Как оформить такой код через класс?

Как оформить такой код через класс?

Интересует именно функция wrapChain, сделал что-то похожее но не робит

199
Сортировка массива с объектами js

Сортировка массива с объектами js

Здравствуйте, мне по API приходит массив с объектами, в каждом объекте есть ключ priceНужно сделать фильтрацию по убыванию и возрастанию цены

220
Как перенести функции на сервер JS

Как перенести функции на сервер JS

Приветствую всехВозникла задача скрыть js код на сайте

176