Как сделать так, чтобы мой заголовок действовал так же, как прокрутка параллакса

Question

Я создал эффект прокрутки параллакса на своем веб-сайте, и это все работает нормально, но заголовок, даже если он находится в том же div, что и у прокрутки параллакса., Не остается в том же месте, но движется вверх с основным текстом. Я много чего перепробовал, но ни один из них, похоже, не работает. Я включил HTML и CSS, которые имеют отношение к делу. Спасибо

Соответствующий HTML:

<div class="parallax-effect">
    <h1 class="para"><strong>We Will Beat Coronavirus</strong></h1>
</div>

Соответствующий CSS:

.parallax-effect {
    background-image: url("https://eyeq.photos/wp-content/uploads/2018/07/pexels-photo-371633.jpg");
    min-height: 600px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.para {
    size: 100%
    margin: 0;
    position: absolute;
    top: 45%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

Если вам нужны дополнительные CSS, которые я пропустил, тогда просто скажите , Может ли это быть исправлением CSS, не имеющим ничего общего с JS. Спасибо.

Answer 1

Это не работает, потому что вы абсолютно позиционируете заголовок относительно исходного содержащего блока. Он просто помещается в то место, которое вы указали сверху и слева, и перемещается вверх с остальной частью текста, когда пользователь прокручивает вниз.

То, что вы ищете, это position: fixed;, что сделает его относительно окно просмотра. Вам также нужно установить position: relative; z-index: -1; в div .parallax-effect, чтобы скрыть заголовок, когда он пересекает нижний край изображения.

.parallax-effect {
    background-image: url("https://eyeq.photos/wp-content/uploads/2018/07/pexels-photo-371633.jpg");
    min-height: 600px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: -1;
}

.para {
    size: 100%;
    margin: 0;
    position: fixed;
    top: 45%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

CodePen: https://codepen.io/warhammered_cat/pen/OJyybGM