Как сделать появление баннера от определенной высоты?

Question

[zeaovede]

Как сделать, чтобы баннер появлялся от 1000пх, а от 0 до 1000 исчезал?
Пример - баннер

Answer 1

[Виталий Першин]

Как вариант:

Comments

[zeaovede]

Выглядит классно. На практике скорее всего будет не просто адаптировать его под свой проект на WordPress. В любом случае попробую. Тут нужно понимание, какие классы как между собой функционируют, как он связаны между собой. В общем ковырять не перековырять. Чтобы интегрировать. Хотя выглядит все проще некуда

[Виталий Першин]

zeaovede, Тут как раз таки все элементарно, когда скролл прокручивается до указанного значения, задается всего один класс scroll-active для body и от него можно применить любые стили к любому внутреннему элементу, пример: .scroll-active .bnr {some code}. Достаточно добавить скрипт, заведется на любой cms и любой теме

[zeaovede]

Виталий Першин, супер. Но зная себя. Блог на готовой теме, в данном решении вижу идёт подмена фона на чёрный, и шрифт белый. Оснований не доверять вам нет. Посмотрим, что да как

[zeaovede]

Но вообще топовое решение. На просторах интернета такого не видел. Я бы мог просто оставить плавающие баннеры, но по дизайну не подходит. Придётся много правок вносить, чтобы ширину шапки подогнать с учётом выступающих по бокам баннеров. Не хочется этим заниматься, и чем закончится неизвестно. А вот ваше решение это прямо то что надо

[Виталий Першин]

zeaovede,

в данном решении вижу идёт подмена фона на чёрный, и шрифт белый.

Так это просто для примера, чтобы понятно было, что одним классом можно все менять. За это отвечают последние 2 блока css:

body.scroll-active {
  color: #fff;
  background-color: #2f2f2f;
}

.scroll-active .bnr {
  opacity: 1;
}

остальное вам вообще не нужно ни смотреть, ни тем более добавлять себе в проект. Просто поймите как это работает и придумайте как можно применить у себя.

[zeaovede]

Виталий Першин, с полтыка завелось. Гибкая интеграция, можно подогнать под любой дизайн сайта, не важно белый он или темный. Я счастлив. https://imgur.com/wFUq7PT
Для телефона добавил медиа-запрос. Так как на маленьком экране такие баннеры закрывают полезный контент, и даже если добавить отступы под них, то в целом выглядеть это будет скорее в ущерб, чем на пользу.

@media (max-width:1063px){
.content{display:none;}
.bnr_side_right{display:none;}
.bnr_side_left{display:none;}
}

Спасибо большое за помощь.

[zeaovede]

Виталий Першин, возможно сможете подсказать, как грамотнее сделать, чтобы на футер не заезжало

[Виталий Першин]

zeaovede, не знаю, все зависит от ситуации, я просто показал пример. Можно футтеру как вариант задать z-index больше

[zeaovede]

Виталий Першин, возможно вместо селекторов задать классы, не один класс, а несколько?

let body = document.querySelector("body");

window.addEventListener("scroll", (e) => {
  // If the height is more than 600px,
  // Add the nav-scroll class to the header class
  if (document.scrollingElement.scrollTop > 600) {
    body.classList.add("scroll-active");
  }
  // Otherwise, we delete the scroll-active class
  else {
    body.classList.remove("scroll-active");
  }
});

Селектор body это хорошо, но недостаточно

[Виталий Першин]

zeaovede,

Достаточно:

.scroll-active .someClass{
  // code...
}

.scroll-active .other{
  // code...
}

.scroll-active .other span div #other {
  // code...
}

.scroll-active .other span div #other {
  // code...
}

[zeaovede]

Виталий Першин, отличный метод. Благодарю