javascript - 保持 div 垂直居中于父元素的可见部分

Question

目前我有一个带有以下代码的标题元素

<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>

header 元素从 body 开始，到窗口底部 75 px 处结束。

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

当我开始向下滚动时，标题元素开始随着标题和标语跨度向上移动。但是，我想让 h1 和 span 元素垂直居中到 header 元素的可见部分，有点像 iStockPhoto website .请注意，您向下滚动搜索表单时如何保持垂直居中于背景图像容器。

我如何实现类似的东西？

Answer 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%;
    }
}

可以试试here .