0

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

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 是不固定的。

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

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

对于“img”div 中的滚动部分，我想使用一种“overflow:scroll”，但滚动条真的很糟糕。

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

谢谢你的帮助！

4

1 回答 1

4

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

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

如果您不想要额外的 HTML，and 元素可能会更改为伪元素.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在这里。

对于一个几乎完全正确的解决方案，这里有一个涉及一些 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在这里。

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

于 2013-10-09T12:46:18.413 回答