CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hook
Hook

Reputation: 460

Website with a tricky structure with JS

Here is my tricky problem. I'm trying to do this:

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

(More clear than an explication I think).

My structure :

<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>

Important informations :

I am using "section" for implementing a next and previous button in the header (with anchors).

My problem is the scrolling part. I am really lost when I try to fix the "content" div. I don't know how to fix everything except the scroll of the image in the active "img" div when the active "content" div hits the header. (Everyone follows? Look here : http://www.hostingpics.net/viewer.php?id=767312test.gif

For the scrolling part in the "img" div, I was thinking use a sort of "overflow:scroll" but the scrollbar is really awful.

I don't know if it's enough clear. If there is any problem I can complete my problem. I am not very comfortable with complex structures in html with JS.

Thanks for your help!

Upvotes: 0

Views: 271

Answers (1)

jsea
jsea

Reputation: 4037

This is pretty close to what you're asking for (using CSS only).

This relies on the fact that the backgrounds are solid colors. It uses various specifically-defined height properties as well that match some padding properties.

The .top-bar and .bottom-bar elements can probably be changed to pseudo elements if you don't want the extra HTML.

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.

For an almost completely correct solution, here is one with some jQuery involved.

New 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.

Note: It duplicates the .img element and its children. This could be memory intensive depending. However, it does make it work as intended without any visual lag or artifacts.

Upvotes: 4

Related Questions