5

更新

我在 GitHub 上做了一个 repo：

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

非常感谢Sargo Darya和Edward J Payton。

如果您向下滚动，我必须创建一个向上滑动的标题，反之亦然。问题是，它会跳跃（如果你在diff-range between 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';
});

另一个问题是，如果第一次更改滚动方向，则不会发生任何事情。但是，这可以通过一个间隔来修复，或者其他。

4

3 回答 3

4

我相信这正是你想要的：

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/

于 2013-09-24T10:33:31.077 回答
1

试试这个：- http://jsfiddle.net/aiioo7/rKW3f/7/

JS：-

var scrollDir = (function (oldOffset, lastOffset, oldDir) {
    return function (offset) {

        var dir = offset < oldOffset;
        if (dir !== oldDir) {
            lastOffset = offset;
        } else {
            offset = offset - height;
        }
        oldOffset = offset;
        oldDir = dir;
        return {
            dir: dir,
            last: lastOffset
        };
    };
}());

var header = document.querySelector('header');
var height = header.clientHeight;

$(window).scroll(function () {
    var scrollY = $(window).scrollTop();
    var dir = scrollDir(scrollY);
    var diff = dir.last - scrollY;

    var max = Math.max(-height, Math.min(height, diff));

    max = (dir.dir ? max - height : max); 
    max = scrollY<height?0:max;


    $('header').data('size', 'small');
    $('header').stop().animate({
        top: max
    }, 600);


});
于 2013-09-24T05:19:46.263 回答
1

Sargo Darya 上面的答案正是我想要的，但我发现了一个 Webkits 惯性滚动的错误，所以我做了一个修复：

// Scrolling Header
var header = $('header'),
headerHeight = header.height(),
offset = 0,
lastPos = 0;

$(document).on('scroll', function(e) {
var newPos = $(document).scrollTop(),
    pos = newPos-lastPos;

if (offset+pos>headerHeight) { 
    offset = headerHeight;
} else if (newPos < 0){ // webkit inertia scroll fix
    offset = 0;
} else {
    offset = offset+pos;
};
if (offset < 0) {
    offset = 0;
} else {
    offset = offset;
};

header.css('top', (-offset)+'px');

lastPos = newPos;
});

添加一行修复它。if - 如果滚动位置低于 0，则将标题偏移设置为 0。

基于 Sargo Darya 的演示 - http://jsfiddle.net/edwardomni/D58vx/4/

于 2013-11-27T17:49:30.470 回答