Блог

Главная - Вопросы по программированию - Сохранить div по вертикали отцентрированным до видимой части родительского элемента

Сохранить div по вертикали отцентрированным до видимой части родительского элемента

#javascript #html #css #flexbox

#javascript #HTML #css #flexbox

Вопрос:

В настоящее время у меня есть элемент заголовка со следующим кодом

 <header>
    <div class="container">
        <div class="row" style="display: flex; justify-content: center">
            <div class="col-xs-12 text-center" style="align-self: center">
                <h1>My header</h1>
                <span id="slogan">my slogan</span>
            </div>
        </div>
    </div>
</header>

Элемент заголовка начинается в начале основного текста и заканчивается на расстоянии 75 пикселей от дна окна. 

 header {
    height: calc(100vh - 75px);
}

Когда я начинаю прокручивать вниз, элемент заголовка начинает перемещаться вверх вместе с заголовком и диапазоном слогана. Тем не менее, я хочу сохранить элементы h1 и span по вертикали отцентрированными по отношению к видимой части элемента заголовка, примерно как на веб-сайте iStockphoto. Обратите внимание, что при прокрутке вниз форма поиска остается вертикально центрированной до контейнера фонового изображения.

Как мне реализовать что-то подобное?

Комментарии:

1. вы имеете в виду эффект parralax или что? ваш вопрос неясен..

2. это скрипт для установки фиксированного положения и перемещения верхнего значения… используйте инструменты инспектора

Ответ №1:

После небольшого количества проб и ошибок я создал эффект с помощью следующего кода.

 <header>
  <div class="container">
    <div class="row" style="display: flex; justify-content: center">
      <div class="col-xs-12 text-center" style="align-self: center">
        <h1>Header</h1>
        <span id="slogan">my slogan</span>
      </div>
    </div>
  </div>
</header>

<section style="height: 1000px">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
</section>

 

 $(function() {
    var initialTitleHeight = $("header h1").position().top,
        initialSloganBottom = $("header span").position().top   $("header span").height(),
        headerHeight = $("header").height(),
        headerMaxMargin = headerHeight - (initialSloganBottom - initialTitleHeight   50);

    $(window).scroll(function(event) {
        var scroll = $(window).scrollTop(),
            marginTop = (initialTitleHeight   scroll < headerMaxMargin) ? initialTitleHeight   scroll : headerMaxMargin;

        $("header h1").css({
            marginTop: marginTop   "px"
        });
    });
})

 

 header {
    height: calc(100vh - 75px);
    background-color: #F90;

    .container, .row {
        height: 100%;
    }
}

Вы можете попробовать это здесь.