具有JS结构棘手的网站

Website with a tricky structure with JS

本文关键字：网站 JS 结构 具有      更新时间：2023-09-26

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

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中的滚动部分，我想使用一种"溢出：滚动"，但滚动条真的很糟糕。

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

感谢您的帮助！

这非常接近您的要求(仅使用 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在这里。

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

j查询：

$(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元素及其子元素。这可能是内存密集型的，具体取决于。但是，它确实使其按预期工作，没有任何视觉滞后或伪影。

相关文章：