保持 div 垂直居中到父元素的可见部分答案

【问题标题】：Keep div vertically centered to visible part of parent element保持 div 垂直居中到父元素的可见部分
【发布时间】：2016-10-22 01:52:24
【问题描述】：

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

<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 元素垂直居中到标题元素的可见部分，有点像iStockPhoto website。请注意您向下滚动的搜索表单如何保持垂直居中于背景图像容器。

我如何实现类似的东西？

【问题讨论】：

你指的是视差效应还是什么？你的问题不清楚..
这是一个设置固定位置并移动顶部 val 的脚本......使用检查器工具

标签： javascript html css flexbox

【解决方案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。

【讨论】：