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

225

03 января 2018, 20:51

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

Answer 1

Вы это делаете при $(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)");
 }
});