Предотвращение изменения фонового изображения при прокрутке

У меня есть фоновое изображение, которое немного изменяет размер при прокрутке вверху на мобильных устройствах. И он возвращается к своему размеру, когда я снова прокручиваю вверх. Вы можете увидеть это здесь

Я попытался использовать

background-attachment: fixed;

кроме всего кода css, который вы видите ниже, но он не работает.

CSS

.bg-1, .bg-2, .bg-3,
.bg-1:after, .bg-2:after, .bg-3:after { 
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 0; 
}

.bg-1 li span, .bg-2 li span, .bg-3 li span { 
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 1;
  z-index: 0;
}

.bg-1 li span { background-image: url(../images/slide-1.jpg); }
.bg-2 li span { background-image: url(../images/slide-3.jpg); }
.bg-3 li span { background-image: url(../images/slide-2.jpg); }

ol,ul {
  list-style:none;
}

HTML

 <body>

  <ul class="bg-2">
    <li><span></span></li>
  </ul>

  <nav class="navbar">
    <div class="container-fluid social-nav">

  ...

Просто для объяснения, это список, потому что, если я хочу сделать слайд-галерею, он добавляет больше

<li><span></span></li>

Но я использую слайд только на домашней странице.

Как я могу предотвратить изменение размера?

ОТВЕТЫ

Ответ 1

Если фоновое изображение изменяет размер при первоначальной прокрутке, я предполагаю, что элемент с этим фоном должен иметь динамическую высоту, сгенерированную с помощью vw/vh в CSS или JS/jQ script. Я столкнулся с этой же проблемой, и я нашел то, что считаю верным методом для решения этой проблемы (по крайней мере, до тех пор, пока мобильные браузеры не предоставят собственное решение).

Используя простую функцию jQuery, вы можете сохранить ширину окна при загрузке страницы и использовать это, чтобы ограничить функцию изменения размера контейнера до размеров видового экрана, более широких, чем точка останова рабочего стола (992px +) и более узкие видовые экраны, пока изменяется ширина видового экрана, не только высота. Таким образом, на мобильных устройствах и планшетных устройствах при прокрутке есть только вертикальное изменение размера видового экрана, поэтому функция изменения размера не запускается.

var breakpoint = 991;
var bgHeight = function() {
    $('#bg').css('height', $(window).height() + 'px');
}; bgHeight();
var windowWidth = $(window).height();
$(window).on('resize', function() {
    if ((($(this).width() <= breakpoint) && ($(this).width() != windowWidth))
        || ($(this).width() > breakpoint)) {
        bgHeight();
    }
    windowWidth = $(window).width();
});

CodePen: https://codepen.io/brandonmcconnell/pen/jayYbB