如果向下滚动则向上滑动标题,反之亦然

Question

更新

我在GitHub上做了一个回购:

https://github.com/yckart/Veil.js

非常感谢Sargo Darya和Edward J Payton.

---

我要创建一个标题,如果向下滚动则向上滑动,反之亦然.问题是,它跳跃(如果你在 - 范围diff之间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';
});

另一个问题是,如果第一次改变滚动方向,则没有任何反应.但是,这可以用间隔来修复,否则.

Answer 1

我相信这正是您想要的：

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;
});

演示： http: //jsfiddle.net/yDpeb/