CSS эффект параллакса высота до 50%

Question

В настоящее время я использую эффект параллакса, который занимает весь фон первой страницы. Моя проблема в том, что я хочу установить высоту как 50%.. но это не работает.

---

Код:

<header class="parallax-window" data-parallax="scroll" data-image-src="img/picture.jpg" alt="test">

.parallax-window {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 50%; //Not working.. why? 
}


  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js'></script>
  <script >// SMOOTH SCROLLING
  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 900);
          return false;
        }
      }
    });
  });
  $('.parallax-window').parallax({imageSrc: 'img/picture.jpg'});
  </script>

Answer 1

Прежде всего: вы начинаете параллакс дважды! Атрибут data-parallax="scroll" запускает автоматическую инициализацию, которую вы повторяете, вызывая $('.parallax-window').parallax({imageSrc: 'img/picture.jpg'}); в вашем JavaScript. Также нет необходимости указывать источник изображения дважды! Либо вы используете атрибут data-image-src или вариант JavaScript imageSrc, Один фактически перезаписывает другой, поэтому он не причиняет вреда, но в этом нет необходимости.

Кроме того, относительная (или процентная) высота работает только по отношению к родительскому элементу. Если родительский элемент не имеет высоты или относительной высоты, установка этого атрибута в дочерних элементах не будет работать. Это связано с CSS. Вы можете попробовать установить родительский элемент на 100% (например, body { height: 100%; } или до абсолютной высоты (body { height: 1200px; }) или высота, связанная с высотой просмотра (body { height: 200vh; }). Но я бы не рекомендовал это, поскольку вы должны гарантировать, что ваш контент соответствует определенному размеру.

Я бы предпочел работать с чем-то вроде:

.parallax-window {
    min-height: 50vh;
}

также убедитесь, что вы закрываете <header> элемент, прежде чем поставить другой код. В противном случае этот код будет помещен перед параллаксом.