Javascript 固定标题视差卷轴

我试图让页面的内容部分在横幅图像上做一个微小的视差滚动，同时保持导航/标题固定不变

现在，图像和内容的视差都位于导航部分的顶部。有人能帮忙吗

*
{
保证金：0；
填充：0；
}
P
{
边缘顶部：20px；
边缘底部：20px；
}
/*#图像包装器
{
位置：固定；
宽度：100%；
身高：100%；
溢出x：隐藏；
溢出y：滚动；
透视图：1px；
透视原点：0；
}  */
.形象
{
变换原点：0；
变换：translateZ（-1px）标度（2）；
}
#我的旗帜
{
显示：块；
宽度：100%；
高度：300px；
}
.内容
{
位置：相对位置；
背景：rgba（0,0,0,0.8）；
颜色：#fff；
高度：900px；
最大宽度：3000px；
利润率：5%自动；
顶部：-92px；
}
标题
{
高度：120px；
宽度：100%；
边缘底部：82px；
边框：1px纯黑；
}
#试验
{
位置：固定；
宽度：100%；
身高：100%；
溢出x：隐藏；
溢出y：滚动；
透视图：1px；
透视原点：0；
}

Lorem ipsum dolor sit amet，奉献精英。除此之外，还有一个例外，那就是要保持生命！Eligendi voluptas natus，nostrum dolorum quam nesciunt？自由之城，圣体之城

暂时性的准同一性行为是一种天意错误，是一种行为，是一种行为，是一种行为？你的名字是什么

我们的建筑设计师是谁？是谁？现在，我们需要一个建筑设计师，坐在这里，解释一下自由的环境

结果表明，小白鼠的眼睑在明显的复发过程中是一种不流动的液体。玛尼·库斯·莫莱斯蒂亚

为了创建视差效果，您需要设置背景图像并将其“背景附件”属性设置为“固定”，然后在滚动时会产生视差错觉。请参阅小提琴的链接

在您的HTML中，我已将图像更改为背景图像：

<div class="image" style="background-image: url(http://i.imgur.com/hPLqUtN.jpg);"></div>

---

fiddle的链接包含所有代码，包括所有HTML/CSS。

您添加的代码不会复制您的问题。请添加完整的代码。

header {
  height: 120px;
  width: 100%;
  border: 1px solid black;
}
.image {
  /* Set a specific height - this can be changed to whatever you want */
    height: 500px; 
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.content {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  height: 900px;
  max-width: 3000px;
  margin: 0 auto;
}