javascript - 使用 JS 结构复杂的网站

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>

重要信息:

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

我正在使用“部分”在页眉中实现下一个和上一个按钮(带 anchor )。

我的问题是滚动部分。当我尝试修复“内容”div 时，我真的迷路了。当事件的“内容”div 击中标题时，我不知道如何修复事件“img”div 中图像滚动以外的所有内容。 (大家都关注了吗？看这里:http://www.hostingpics.net/viewer.php?id=767312test.gif

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

不知道说的够不够清楚。如果有任何问题，我可以完成我的问题。我不太适应 HTML 中带有 JS 的复杂结构。

感谢您的帮助!

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 元素及其子元素。这可能会占用大量内存，具体取决于。但是，它确实可以按预期工作，没有任何视觉延迟或伪影。