我正在尝试重新创建反向滚动效果,如下面的链接,我使用jquery 1.9.1版本来创建滚动效果。
我想要实现的是当滚动发生时它会自动调整到序列中的下一个div,不像我的代码它只会向下滚动一点......
我正在使用下面的html
<div class="panelCon">
<div id="pane-5" class="panel" style="">
<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>
<div class="panelCont">
<div class="panela">
<h1>1</h1>
</div>
<div id="pane-2" class="panela">
<h1>2</h1>
</div>
<div id="pane-3"class="panela">
<h1>3</h1>
</div>
<div id="pane-4"class="panela">
<h1>4</h1>
</div>
<div id="pane-5" class="panela">
<h1>5</h1>
</div>
</div>
的CSS:
body {
margin: 0;
padding: 0;
}
.panelCon{
position: fixed;
bottom: 0;
left:0;
width: 49%;
float:left;
}
.panel {
width: 100%;
}
.panela {
width: 100%;
height:600px;
padding:20px;
}
.panel h1 {
width: 100px;
position: relative;
display: block;
margin: 0 auto;
text-align: center;
top: 50%;
}
#pane-1 {
background:url('about.jpg');
background-size:100% 100%;
}
#pane-2 {
background-color: red;
}
#pane-3 {
background-color: white;
}
#pane-4 {
background-color: pink;
}
#pane-5 {
background-color: yellow;
}
.panelCont{
position:relative;
bottom: 0;
left:0;
width: 51%;
height:100%;
float:left;
font-size:99px;
float:right;
background-color:#333;
}
jquery 1.9.1
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);
});