更新
我在GitHub上做了一个回购：
https://github.com/yckart/Veil.js
非常感谢Sargo Darya和Edward J Payton.
我要创建一个标题,如果向下滚动则向上滑动,反之亦然.问题是,它会跳跃(如果你处于0-128之间的差异范围内).
我无法弄清问题所在.知道如何让它正常工作吗？
这是我到目前为止所做的：http://jsfiddle.net/yckart/rKW3f/
// something simple to get the current scroll direction
// false === down | true === up
var scrollDir = (function (oldOffset,lastOffset,oldDir) {
return function (offset) {
var dir = offset < oldOffset;
if (dir !== oldDir) lastOffset = offset;
oldOffset = offset;
oldDir = dir;
return {dir: dir,last: lastOffset};
};
}());
var header = document.querySelector('header');
var height = header.clientHeight;
addEventListener('scroll',function () {
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var dir = scrollDir(scrollY);
var diff = dir.last-scrollY;
var max = Math.max(-height,Math.min(height,diff));
header.style.top = (dir.dir ? max-height : max) + 'px';
});
另一个问题是,如果第一次改变滚动方向,则没有任何反应.但是,这可以用间隔来修复,否则.
最佳答案
我相信这正是你想要的：
var header = $('header'),headerHeight = header.height(),treshold = 0,lastScroll = 0;
$(document).on('scroll',function (evt) {
var newScroll = $(document).scrollTop(),diff = newScroll-lastScroll;
// normalize treshold range
treshold = (treshold+diff>headerHeight) ? headerHeight : treshold+diff;
treshold = (treshold < 0) ? 0 : treshold;
header.css('top',(-treshold)+'px');
lastScroll = newScroll;
});
