Question

这是我棘手的问题。我正在尝试这样做：

http://www.hostingpics.net/viewer.php?id=767312test.gif

（比我想的更清楚）。

我的结构：

<header></header>

<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img1.png"/></div>
</div>

<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img2.png"/></div>
</div>

<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img3.png"/></div>
</div>

<footer></footer>

重要信息：

“标题”已修复
“内容”适合屏幕减去标题高度
每个“部分”都相同但内容不同
当图像结束时，“内容”div不固定。

我正在使用“section”来实现标题中的下一个和上一个按钮（带锚点）。

我的问题是滚动部分。当我尝试修复“内容”div时，我真的迷路了。当活动的“content”div击中标题时，我不知道如何修复除活动“img”div中的图像滚动之外的所有内容。（每个人都跟着？看这里：http://www.hostingpics.net/viewer.php?id=767312test.gif

对于“img”div中的滚动部分，我在考虑使用某种“溢出：滚动”但滚动条真的很糟糕。

我不知道它是否足够清楚。如果有任何问题我可以完成我的问题。我对使用JS的html中的复杂结构不太满意。

感谢您的帮助！

Answer 1

这非常接近你所要求的（仅使用CSS）。

这取决于背景是纯色的事实。它使用各种特定定义的height属性，以匹配某些padding属性。

如果您不想要额外的HTML，.top-bar和.bottom-bar元素可能会更改为伪元素。

<强> HTML：

<header>Header</header>

<div class="top-bar"></div>
<div class="bottom-bar"></div>

<div class="section">
    <div class="text">Section 1 Text</div>
    <div class="content">
        <div class="img"><img src="http://placekitten.com/100/1000"/></div>
    </div>
</div>

<div class="section">
    <div class="text">Section 2 Text</div>
    <div class="content">
        <div class="img"><img src="http://placekitten.com/200/2000"/></div>
    </div>
</div>

<div class="section">
    <div class="text">Section 3 Text</div>
    <div class="content">
        <div class="img"><img src="http://placekitten.com/300/3000"/></div>
    </div>
</div>

<footer>Footer</footer>

<强> CSS：

body {
    margin: 0;
    padding: 100px 0 0;
}

header {
    background-color: red;
    height: 100px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

footer {
    background-color: blue;
    height: 100px;
}

.section {
    min-height: 400px;
}

.text {
    background-color: aqua;
    height: 50px;
}

.content {
    background-color: green;
    min-height: 100%;
    padding: 40px 0;
    position: relative;
}

.img {
    background-color: yellow;
    min-height: 70%;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
    width: 80%;
}

.img > img {
    vertical-align: middle;
}

.top-bar, .bottom-bar {
    background-color: green;
    height: 40px;
    position: fixed;
    width: 100%;
    z-index: 5;
}

.top-bar {
    top: 100px;
}

.bottom-bar {
    bottom: 0;
}

footer, .text {
    position: relative;
    z-index: 6;
}

JSFiddle here.

对于几乎完全正确的解决方案，这里涉及一些jQuery。

新CSS：

body {
    margin: 0;
    padding: 100px 0 0;
}

header {
    background-color: red;
    height: 100px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

footer {
    background-color: blue;
    height: 100px;
}

.section {
    min-height: 400px;
}

.text {
    background-color: aqua;
    height: 50px;
}

.content {
    background-color: green;
    min-height: 100%;
    padding: 40px 0;
    position: relative;
}

.img {
    background-color: yellow;
    min-height: 70%;
    margin: 0 auto;
    padding: 40px 0;
    text-align: center;
    width: 80%;
}

.img > img {
    vertical-align: middle;
}

.top-bar, .bottom-bar {
    background-color: green;
    height: 40px;
    position: fixed;
    width: 100%;
}

.top-bar {
    top: 100px;
    z-index: 5;
}

.bottom-bar {
    bottom: 0;
    z-index: 7;
}

footer, .text {
    position: relative;
    z-index: 8;
}

.img-fix {
    bottom: 40px;
    height: 400px;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 6;
}

<强> jQuery的：

$(document).ready(function(){
    $(".content").each(function(){
        $(this).append($(this).html());
        $(this).find(".img + .img").wrap("<div class='img-fix'></div>");
    });

    $(window).resize(function() {
        resizeImgFix();
    });

    resizeImgFix();
});

function resizeImgFix() {
    $(".img-fix").height($(window).height() - $("header").height() - $(".top-bar").height() - $(".bottom-bar").height());
    $(".img-fix").each(function(){
        $(this).scrollTop($(this).prop("scrollHeight"));
    });
}

JSFiddle here.

注意：它复制了.img元素及其子元素。这可能是内存密集型的。但是，它确实使其按预期工作，没有任何视觉延迟或伪影。

网站上有一个棘手的JS结构

1 个答案: