經常會遇到的以下情形：
導航向下滾就隱藏，向上滾動就顯示
實現滾動動畫效果：向下滾動 左右兩邊的內容向中間移動，而向上滾動 兩個內容又退回到左右兩邊；又或者向下滾動canvas放大，反之縮小
這些動畫原理當知少不了scrollTop()函數；
scrollTop() 定義和用法
scrollTop() 方法設置或返回被選元素的【垂直滾動條位置】。
Note：
當滾動條位置位於最頂部時，位置是0；
當用於返回位置時：
該方法返回 第一個匹配元素的滾動條的垂直位置。語法：$(selector).scrollTop()
當用於設置位置時：
該方法設置 所有匹配元素的滾動條的垂直位置。語法：$(selector).scrollTop(position) 參數position ： 規定以像素為單位的垂直滾動條位置。
如何判斷是up還是down
var a;
function scroll( fn ) {
var beforeScrollTop = document.body.scrollTop,
fn = fn || function() {};
window.addEventListener("scroll", function() {
var afterScrollTop = document.body.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if( delta === 0 ) return false;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
}
//第一種寫法
scroll(function(direction) {
// console.log(direction);
a = direction;
});
//第二種寫法執行完事件后的回調函數
function fn(direction) {
// console.log(direction);
a = direction;
};
window.onscroll=function(){
console.log(a);
}
來解決以上情形
通過判斷向上或者向下，后，就是原理問題；
案例~~~~滾動內容往中間或兩邊移動效果
原理：先給元素設置一個left值讓其隱藏，當滾動條到一定位置，改變其left值讓其出現。改變幅度與滾動幅度正相關。透明度那個也是同理
<!DOCTYPE html> <html> <head> <title>Hello World</title> <style type="text/css"> #wrapper {height: 100%;overflow: hidden;} #screen {width: 300px;height: 800px;} #mark{position: relative;width: 200px;height: 50px;font-size: 60px;left: -100px;} #cover{position: relative;width: 200px;height: 50px;font-size: 60px;left: 1360px;} #dialog {position: relative;width: 200px;height: 50px;margin: 0 auto;font-size: 60px;line-height: 50px;opacity: 0;} #ohyeah {height: 800px;} </style> <script src="Lazyload.js/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="wrapper"> <div id="screen"></div> <div id="mark">Hello World</div> <div id="dialog"></div> <div id="cover">Hello World</div> <div id="ohyeah"></div> </div> <script type="text/javascript"> var beforeScrollTop = $(window).scrollTop(); $(window).scroll(function() { var afterScrollTop = $(window).scrollTop(), updown = afterScrollTop - beforeScrollTop; if( updown === 0 ) return false; beforeScrollTop = afterScrollTop; console.log(updown > 0 ? "down" : "up"); var isUpDown = updown > 0 ? "down" : "up"; //判斷往上還是往下 var scrollTop = $(window).scrollTop(); if(isUpDown == 'down' && scrollTop >= 400) { //數據自取，可依據元素的scrollTop值 var markLeft = parseInt($('#mark').css('left')); left = markLeft + (scrollTop/20); //值的變動與滾動幅度現相關 ， 自行調節 console.log(markLeft); if(markLeft <= 640) { //這個值是讓他滾動到一個邊界 ， 自行調節 $('#mark').css('left', left + 'px'); //舉例一個元素，其他的自己來咯 } } else if(isUpDown == 'up' && scrollTop <= 700) { //往上時做相反 var markLeft = parseInt($('#mark').css('left')); left = markLeft - (scrollTop/30); if(markLeft >= -100) { $('#mark').css('left', left + 'px'); } } //其他的如opacity left 同理，自己實踐一下吧 }); </script> </body> </html>