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 /.
I've set up a JSFiddle / 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
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
Share Improve this question asked Dec 25, 2013 at 19:21 Patrick AllenPatrick Allen 2,1682 gold badges17 silver badges20 bronze badges1 Answer
Reset to default 18here 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;
}