2017-04-12 7 views
0

私はスクロールして、最初のレイヤー上でうまく動作することで私のウェブに暴露効果を出そうとしています。しかし、それはちょっと前の層の終わりのスクロールの後にエフェクトレイヤーを与えるのが混乱しています。jqueryでスクロールするときのページの表示方法を教えてください

フロントレイヤーをスクロールした後にレイヤーを表示し続ける方法はありますか? 任意の提案は素晴らしいことだ、あなたは括弧が欠落している

$(document).ready(function(){ 
 
\t 
 
\t $(window).on('scroll', function(){ 
 
\t \t var wHeight = $(window).height(); 
 
\t \t var scrollTop = $(window).scrollTop(); 
 
\t \t $('.box3').css('transform','translateY(-'+ scrollTop +'px)'); 
 
\t \t if(scrollTop > 700){ 
 
\t \t \t $('.box2').css('transform','translateY(-'+ scrollTop-wHeight +'px)'); 
 
\t \t } 
 
\t }); 
 
\t 
 
});
.boxWrapper { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    background-color: #fafafa; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
.boxWrapper p{ 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    font-size: 20px; 
 
    color: #fff; 
 
} 
 
.box{ 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.box1{ 
 
    background-color: #f00; 
 
} 
 
.box2{ 
 
    background-color: #0f0; 
 
} 
 
.box3{ 
 
    background-color: #00f; 
 
} 
 

 
.content { 
 
    height: 3000px; 
 
    background-color: #e6e6e6; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="boxWrapper"> 
 
\t <div class="box box1"><p>box1</p></div> 
 
\t <div class="box box2"><p>box2</p></div> 
 
\t <div class="box box3"><p>box3</p></div> 
 
</div> 
 
<div class="content"> 
 
\t 
 
</div>

答えて

1

ありがとう、ちょうど変更:

$('.box2').css('transform','translateY(-'+ (scrollTop-wHeight) +'px)'); 

$('.box2').css('transform','translateY(-'+ scrollTop-wHeight +'px)'); 

をそして、あなたは良いです。

関連する問題