Html div图像位置固定+；纸卷

我想创造这样的东西：

我指的是第一张照片。如果我在img下滚动div，则跳过图像。 我怎样才能创造呢？如果我给我的img的位置：固定，一切都被摧毁^^ 绝对位置可能有用，但div在导航旁边。 以下是我的尝试：

代码如下：

*{
字体系列：“开放式SAN”；
边际：0px；
填充：0px；
字号：18px；
}
html{
身高：100%；
}
身体{
/*背景：url（“images/bg.png”）重复-x滚动左上#9EB5D6；
背景：url（“images/bg2.png”）*/
身高：100%；
}
导航{
背景：url（“images/line header.png”）重复-x滚动中心底部#4A525A；
填充：15px；
}
导航>ul{
边际：0px；
填充：0px；
文本对齐：居中；
}
导航ul>li{
左边距：25px；
显示：内联块；
列表样式类型：无；
}
导航ulli>a{
显示：块；
文字装饰：无；
颜色：黑色；
颜色：#697683；
过渡：颜色0.5s；
}
导航ulli>a：悬停{
颜色：#FFF；
}
.pic1{
背景：url（images/banner.jpg）；
身高：100%；
宽度：100%；
}
.文本{
高度：800px；
背景颜色：橙色；
}

您必须按如下方式设置CSS规则：

.pic1 {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}

.text{
    margin-top: 792px;
}

这将使div'.pic1'固定，div'.text'能够在div'.pic1'上滚动。这就是解决办法

一些额外的东西：

这里我给了div.text“margintop:792px”。但是，您可以使用jQuery检测视图端口高度，并将该值指定为div.text的“margin top”，这将使其始终正确显示在所有屏幕的折叠下方

下面是如何通过jQuery实现这一点：

$(document).ready(function(){

var wH = $(window).height();
$('.text').css('margin-top',wH);

})

在这种情况下，您必须删除以下CSS规则：

 .text{
        margin-top: 792px;
    }

请注意，您必须首先在web页面中链接jQuery库。也就是说，整个jQuery代码应该如下所示：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
 $(document).ready(function(){

    var wH = $(window).height();
    $('.text').css('margin-top',wH);

    })

</script>

$（文档）.ready（函数（）{
var wH=$（window.height（）；
$（'.text'）.css（'margin-top'，wH）；
})

---

应该在关闭BODY标记之前添加到标记中。

关键是选择正确的方法。这种类型的滚动可以通过一个固定的菜单（位于顶部）、一个按下的div和一个背景图像轻松完成。我添加了一个很好的可重复使用的cat图像来显示效果

你就快到了，只需要给导航一个固定的位置

*{
填充：0；
保证金：0；
}
身体{
背景：url(https://c1.staticflickr.com/9/8226/8557105873_a82c51f03f_z.jpg)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
导航{
背景色：#555555；
文本对齐：居中；
高度：20px；
位置：固定；
顶部：0px；
宽度：100%；
}
李海军{
显示：内联；
列表样式类型：无；
右边填充：20px；
}
李娜{
颜色：白色；
文字装饰：无；
}
.文本{
背景颜色：橙色；
边缘顶部：500px；
最小高度：1000px；
}

文本

信不信由你，这是

位置：固定的
和
z-index:999
Thx的神奇之处，答案非常完美，谢谢你的额外帮助！：）你好，斯克普塔，谢谢你，很高兴它能为你工作：）谢谢你的回答，它太完美了。我给你绿色钩子是因为你更快：）谢谢！