0
我找到了迄今爲止 - 和等,使用 - 是:淡入淡出的元素,你上下滾動
點擊here
或檢查出編輯的演示:(以前的計算器任務。) (由賈伊)
$(document).ready(function(){
//hold box offsets from top
yArr = new Array();
for(var i=1; i<$(".box").size(); i++){
yArr[i] = $('#box' + i).offset().top;
}
//checks if box is off screen
function boxOffScreen(i){
if ((yArr[i] - $(window).scrollTop()) < 20) return true;
return false;
}
//animates box
function boxAnimate(animateTo, i){
if(animateTo == "fade"){
$('#box' + i).stop().fadeTo(100, 0);
} else{
$('#box' + i).stop().fadeTo('fast', 1);
}
}
//checks if it needs to fade/unfade
function triggerAnimate(i){
if (boxOffScreen(i)){
boxAnimate("fade", i);
return;
}
boxAnimate("unfade", i);
}
$(window).scroll(function() {
for(var i=0; i<$(".box").size(); i++){
triggerAnimate(i);
}
});
});
.box{
width: 350px;
height: 200px;
background: #8AC9D0;
margin:50px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
<div id="box6" class="box"></div>
但我想添加淡入和淡出也在頁面的底部。目標是完全看到2或3個元素,並且即將到來的元素(向下滾動時)或前一個元素(當您再次向上滾動時)順利淡入。
任何想法,任何代碼或提示?
非常感謝。