Сайт с использованием Bootstrap 4.
Для работы скролла в свойствах заданы классы. В контейнере parallax__back просто пинг-изображение с прозрачным фоном (большой водяной знак). Нужно что-то вроде парралакс-эффекта. Когда страница загружена "водяной знак" находиться вверху страницы (с небольшим отступом от верха), при прокручивании страницы "водяной знак" перемещается вниз (под контентом, реализовано с помощью z-index)... Cделал, что "водяной знак" перемещается до конца страницы. В идеале хотелось бы,чтобы он останавливался не доезжая до низа... на это мозгов не хватает...
В Edge "водяной знак" вообще не перемещается. В IE 11 он вообще не отображается, не то, что перемещаться :(
<div class="nabizime parallax__cont">
<div class="parallax__back">
<div class="row">
<div class="col-10">
<img src="/images/forparallax.png" alt="" class="img-fluid">
</div>
</div>
</div>
<div class="container nabizime__container parallax__base">
<div class="row">
<div class="col nabizime__titlescont">
<h2 class="nabizime__slogan"><?=_('Bla-Bla-Slogan.')?></h2>
<h1 class="nabizime__title"><?=_('Bla-Bla-Title')?></h1>
</div>
</div>
</div>
</div>
....
.parallax__container {
position: relative !important;
}
.parallax__block {
z-index: 100;
top: 40rem;
width: 98%;
}
.parallax__cont {
position:relative;
height: auto;
display:block;
}
.parallax__base {
}
.parallax__back {
position:absolute;
}
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $(".parallax__back").offset();
$(window).scroll(function () {
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top) {
$(".parallax__back").css({ position: 'fixed', top: '10rem' });
} else {
$(".parallax__back").css({ position: 'absolute' });
}
});
});
$(window).resize(function() {
sidebarScrollTop = $(".parallax__back").offset().top;
});
$(document).resize(function() {
sidebarScrollTop = $(".parallax__back").offset().top;
});
Простой
