先上示例动图

示例动图

熟肉核心代码

scroll(function(direction) {
if (direction == "up") {
jQuery(".scrollcircle").addClass("scroll_up");
} else {
jQuery(".scrollcircle").addClass("scroll_down");
}
});
var cssend = document.querySelector(".scrollcircle");
cssend.addEventListener("webkitAnimationEnd", function() {
jQuery(".scrollcircle").removeClass("scroll_up").removeClass("scroll_down");
}, false);
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);
};

全部代码详见

http://www.dyniao.com/use-Javascript-and-css3-add-scroll-effect/

第 1 条附言 2015-12-18 23:32:43 +08:00

目前这样的配置确实没有什么意义，主要就是看着玩的。

但是可以将这个做成有意义的。
比如弄个右下角的菜单，鼠标指向展开什么的，藏几个链接在里边。

多加了一个判断，这样两个浏览器都能获取到滚动条的位置了。

document.documentElement.scrollTop || document.body.scrollTop

改成非 jq 版的 js 代码，便于操作，将 class 改成 id 了，或者用 html5 的 document.querySelector 。
function g(e){return document.getElementById(e);}
//function g(e){return document.querySelector(e);}
//用法 g(".css") 用着跟 jquery 选择器一样。
scroll(function(direction) {
if(direction=='up')
{
g("scrollcircle").className+='scroll_up ';}
else {
g("scrollcircle").className+='scroll_down ';

}
});
var anim = g("scrollcircle");
anim.addEventListener('animationend', function(){anim.className="";}, false);
function scroll(fn) {
var beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop,fn = fn || function() {};
window.addEventListener("scroll", function() {var afterScrollTop = document.documentElement.scrollTop || document.body.scrollTop, delta = afterScrollTop - beforeScrollTop;if( delta === 0 ) return false;fn( delta > 0 ? "down" : "up" );beforeScrollTop = afterScrollTop;
}, false);
}