Scroll Fixer Variant 2

by meo

HTML

<div class="header">
        
</div>
<div class="pseudoBody">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam auctor enim et libero imperdiet facilisis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla faucibus eros nec arcu egestas lacinia. Etiam eu odio in sem iaculis ornare ornare nec risus. Nullam dapibus eros at diam vestibulum posuere. Cras sollicitudin vestibulum semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras tincidunt tempus tellus, at faucibus est pharetra sit amet.

Sed placerat lectus in nisl rutrum ullamcorper. Quisque quis elit sapien. Etiam tellus tortor, convallis eu imperdiet et, condimentum non felis. Praesent vehicula ullamcorper enim ut bibendum. In congue posuere euismod. Etiam lacinia hendrerit felis sed iaculis. Fusce egestas cursus scelerisque. Praesent pellentesque libero non massa porttitor imperdiet sed ut nunc. Nunc sed quam volutpat mi porta posuere vel ullamcorper lacus. Proin nulla justo, consectetur eget interdum quis, suscipit a erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et quam leo, et dictum lectus. Maecenas sagittis purus vel erat vehicula sit amet accumsan tellus rutrum. Proin a nunc id lorem consequat porta. Phasellus lacus velit, hendrerit in venenatis ac, ornare at eros. Suspendisse sed nunc nulla.

Curabitur in sapien vel ligula ultrices posuere. Donec ipsum purus, dignissim at venenatis sit amet, pretium quis mauris. Ut non mi et eros cursus ornare vel eu augue. Nam ac velit eget magna consequat feugiat. Donec orci dui, fringilla eu vulputate sed, ultricies sit amet ipsum. Sed id iaculis urna. Fusce vulputate pulvinar velit, ac cursus tortor egestas ut. Nam varius gravida neque a viverra. Praesent nibh sem, laoreet eu aliquet vel, laoreet in nisi.

Nunc mollis interdum lorem. Donec elit ligula, condimentum quis ornare at, imperdiet nec sapien. Phasellus ac eros tortor, vel...

CSS

body {
    padding:0;
    min-height: 100%;
    background: green;
}

.header {
    position: absolute;
    top:0; left:0;
    width: 100%; height: 100%;
    background: url(http://www.changethethought.com/wp-content/cesarmoreno1.jpg) no-repeat center 0 fixed;
    background-size: cover;

}

.pseudoBody {
    box-sizing: border-box;
    position: absolute;
    left:0;
    top:100%;
    width:100%;
    background: #3889A3;
    color: #EDEE75;
    padding: 40px;    
}

.fix {
    position: fixed;
    top:0;
    left:0;
}

JavaScript

var winHeight, $win, $spacer, $d, $b, $h, timer,snapTolerance, psBHeight,scrollDirection,prevScrollvalue;

$win = $(window);
$pseudoBody = $(".pseudoBody");
$spacer = $("#spacer");
$d = $(document);
$b = $("body");
$h = $(".header");
timer, scrollDirection, prevScrollvalue;

psBHeight = $pseudoBody.height();

console.log(psBHeight)
$win.on("resize", function(){
    winHeight = $win.height();
}).trigger("resize");

snapTolerance = winHeight * 2;
prevScrollvalue = 0;
scrollDirection = 1;

$win.on("scroll", function(){
    var st = $d.scrollTop();
    $h.css("background-position", "0 "+ -1 * st / 2 + "px");
    
    if( st < prevScrollvalue) {
        scrollDirection = -1;      
    }else{
        scrollDirection = 1;         
    }
    
    prevScrollvalue = st;
    
    if( st >= winHeight && st < winHeight + snapTolerance && scrollDirection === -1){
        $b.height( snapTolerance + winHeight + psBHeight );
        $pseudoBody.addClass("fix");
    }else{
        $b.height("auto");
        $pseudoBody.removeClass("fix");
    }
    
    /*
    clearTimeout( timer );
    
    timer = setTimeout(function(){
        if (st > winHeight/5) {
            $b.animate({"scrollTop": winHeight + "px"},300);
        }
    },500);    */
});