@art_y10

Scroll и position не работают в Edge и IE 11, как получить кроссбраузерное решение?

Сайт с использованием 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;
});
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы