Javascript 如何在固定标题上滚动内容？

我有一张带有

背景附件的简单背景图片：固定。在
.jumbotron
部分，我有标题、副标题和按钮等内容。如何使其在滚动时保持
.jumbotron
内容不变，从而使
.jumbotron
下面的内容像是在移动一样

我以前见过这种类型的效果，但它不是很常见，所以我很难找到一个例子，我希望你理解我的描述


.jumbotron{
背景图片：url(http://placekitten.com/1920/1080);
背景尺寸：封面；
背景附件：固定；
文本对齐：居中；
填充：40px 10px；
颜色：蓝色；
}

标题
字幕
Lorem ipsum door sit amet

.jumbotron{
背景附件：固定；
背景图像：url（“http://placekitten.com/1920/1080");
背景重复：无重复；
颜色：蓝色；
身高：100%；
左：0；
填充：40px 10px；
位置：固定；
文本对齐：居中；
排名：0；
宽度：100%；
}

标题
字幕
Lorem ipsum door sit amet
您必须通过
位置执行此操作：固定
和一些巧妙地使用
z-index

以下是您试图实现的目标：

下面是固定CSS：

.jumbotron {
  background-image: url(http://placekitten.com/1920/1080);
  background-size: cover;
  background-attachment: fixed;
  text-align: center;
  padding: 40px 10px;
  color: blue;
  position: fixed;
  z-index: 1;
  width: 100%;
  top: 0;
}

.content {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  margin-top: 250px;
  width: 100%;
  padding: 1em;
}

实际上，您在这里所做的是将
.jumbotron
固定到页面顶部，并告诉其下面的元素，它必须：

高于
.jumbotron
（这是通过
z-index
实现的）
使
边距顶部
等于
.jumbotron
的高度，这样它就不会从
.jumbotron
顶部开始
编辑

如果
.jumbotron
的高度是动态的（如评论中所问），那么您可以附加一点jQuery来动态设置
.content
部分的
边距顶部

下面是一把小提琴，向您展示如何：

以下是所需的jQuery：

$(document).ready(function(){
    $('.content').css({
    'margin-top':$('.jumbotron').outerHeight()
  });
});

所以你希望标题和副标题在卷轴上保持不变，对吗？我希望jumbotron部分的所有内容都在卷轴上保持不变。你要寻找和描述的不是视差，所以我已经为你更新了你的问题。视差是两个移动对象之间的差，用于确定一个人与这两个（或多个）对象之间的距离。这里只有一个移动的对象。如果你想让背景移动得比内容慢，那就是视差。问题是jumbotron没有固定的高度。这是针对wordpress主题的，这意味着用户可以更改jumbotron中的文本数量，还可以更改高度。您必须使用jQuery/Javascript动态设置页边距顶部。我对我的答案进行了编辑，也为您提供了这个解决方案，如果您想看到它的实际应用，这里有一个小提琴：）为什么宽度：100%在内容上增加额外的边距？如果您确实需要坚持
宽度：100%
规则，请记住在CSS中添加
*{box size:border box；}
，以修复“额外边距”右侧-请参见此处的fixed fiddle:否。为了便于将来参考，您可以在caniuse.com上比较CSS规则及其支持：如果您对此有更多问题，我们可以将讨论转移到聊天（这样我们就不会阻塞评论部分），或者制定一个完整的问题并发布：）