Reverse Scrolling

I'm having trouble finding a solution to what I'm trying to accomplish. I am trying to use JS (or additional libraries) to make it so that when the user scrolls down on the mousewheel the page scrolls the opposite way than it normally would.

Basically, I want the bottom of the page to be seen first and as the user scrolls I want the top of the screen to come down into view. The only example I've been able to find is the right column of http://conduit.com/.

I've set up a JSFiddle http://jsfiddle.net/5UUtV/ with an example to help visualize it. I know it might have something to do with:

window.scrolltop();

but honestly, I'm not sure of the best way to go about this.

I want the panel labeled '1' to be seen first, and the rest to come down into view as the user scrolls.

Any ideas on how this could be done would be greatly appreciated.

Thanks

Answers:

Answer

here is the solution - http://jsfiddle.net/5UUtV/1/

JS

var winHeight = $(window).innerHeight();
$(document).ready(function () {
    $(".panel").height(winHeight);
    $("body").height(winHeight*$(".panel").length);
});

window.addEventListener('resize', function (event) {
    $(".panel").height($(window).innerHeight());
});
$(window).on('scroll',function(){
    $(".panelCon").css('bottom',$(window).scrollTop()*-1);
});

HTML

<body>
    <div class="panelCon"> 
    <div id="pane-5" class="panel">
        <h1>5</h1>
    </div>
    <div id="pane-4"class="panel">
        <h1>4</h1>
    </div>
    <div id="pane-3"class="panel">
        <h1>3</h1>
    </div>
    <div id="pane-2" class="panel">
        <h1>2</h1>
    </div>
    <div id="pane-1" class="panel">
        <h1>1</h1>
    </div>
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
}
.panelCon{
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
}
.panel {
    width: 100%;
}
.panel h1 {
    width: 100px;
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center;
    top: 50%;
}
#pane-1 {
    background-color: green;
}
#pane-2 {
    background-color: red;
}
#pane-3 {
    background-color: white;
}
#pane-4 {
    background-color: pink;
}
#pane-5 {
    background-color: yellow;
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.