jQuery css parallax effect where footer becomes header

Question

I would like to know how I could achieve this parallax effect with either css or jquery:

When opening the web page, we can see 2 things only: an (almost) fullscreen picture and a footer of a 100px high sticking below, at the bottom (whatever the window's dimension, this footer is always visible).

But in fact, this footer is the next sliding page's header that will slide on top of the fullscreen picture while scrolling.

The hardest part is here: whatever the height of that second "page/panel", when the moving header reaches the top of the page, it will remain fixed and from there, the only thing that will move is the rest of that second "page".

I don't ask anyone to do my work for me but it's too complicated to explain so, it's hard to find a specific ressource online that will tell me how to do that (tutorials, etc..). There are plenty of parallax tutorials but they don't explain how to achieve this footer/header thing while there are a lot of websites using this technique.

Here is an example of a website that show this effect: http://themify.me/demo/themes/parallax/

Can someone be nice and lead me to the right direction?

EDIT: here's what I got so far:

<head>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script src="jquery.min.js"></script>
<script src="waypoints.js"></script>
<script src="waypoints-sticky.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.sticky-navigation').waypoint('sticky');
    });
</script>

<style>

body
{
    padding:0px;
    margin:0px;
}
.container
{
    width: 100%;
    margin: 0 auto;
    background-color: blue;
}

.picture_part
{
    height:300px;
    background-color: green;
}

.sticky-navigation
{
    height:100px;
    background: red;
    width: 100%;
}

.sticky-navigation.stuck
{
    position: fixed;
    top: 0;
}
    </style>

</head>

<body>

<div class="container">

    <div class="picture_part"></div>

    <div class="sticky-navigation"> </div>

    <div>
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br />

    </div>

</div>

But it's to show something as it doesn't resolve anything because:

1) the "header/footer" is not stuck at the bottom to begin with

2) the "header/footer" is not part of a second "parallaxes" panel. It's just a div within the main page.

Thanks.

Answer 1

Basically just stick the footer on the bottom of the page and calculate the page height. Then when the user has scrolled at least that much, attach it to the top.

jQuery

$(document).ready(function () {
    // Initialize variable
    var windowHeight = $('#picture-part').height();

    $(window).scroll(function() {
        windowHeight = $('#picture-part').height();

        if ($(this).scrollTop() > windowHeight) {
            $('#sticky-navigation').addClass('sticky-navigation-fixed');
            $('#sticky-navigation').removeClass('sticky-navigation-bottom');
        } else {
            $('#sticky-navigation').removeClass('sticky-navigation-fixed');
            $('#sticky-navigation').addClass('sticky-navigation-bottom');
        };
    });
});

HTML

So the HTML is really basic, just toss everything in to a container, then nest the nav menu in the picture div. This allows absolute positioning for the nav menu until the desired scroll height.

<div id="container">
    <div id="picture-part">
        <div id="sticky-navigation" class="sticky-navigation-bottom"></div>
    </div>
</div>

CSS

#picture-part {
    position: relative;
    height: 100%;
}

#sticky-navigation {
}

.sticky-navigation-bottom {
    position:absolute;
    bottom:0;
}

.sticky-navigation-fixed {
    position: fixed;
    top:0;
}

Fiddle: http://jsfiddle.net/B62R3/

jQuery css parallax effect where footer becomes header

Question

1 answers

solution1
2 2014-03-09 20:35:40

jQuery css parallax effect where footer becomes header

Question

1 answers

solution1 2 2014-03-09 20:35:40

solution1
2 2014-03-09 20:35:40