反向滚动到两个id并行效果

时间:2015-05-04 08:46:29

标签: jquery html5 jquery-ui

我正在尝试重新创建反向滚动效果,如下面的链接,我使用jquery 1.9.1版本来创建滚动效果。

我想要实现的是当滚动发生时它会自动调整到序列中的下一个div,不像我的代码它只会向下滚动一点......

link

我正在使用下面的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);
});

my jsfiddle

0 个答案:

没有答案