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 mousew
Solution 1:
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><divclass="panelCon"><divid="pane-5"class="panel"><h1>5</h1></div><divid="pane-4"class="panel"><h1>4</h1></div><divid="pane-3"class="panel"><h1>3</h1></div><divid="pane-2"class="panel"><h1>2</h1></div><divid="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%;
}
.panelh1 {
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;
}
Post a Comment for "Reverse Scrolling"