0

我正在尝试实现与 iOS Chrome 导航栏滚动和隐藏的方式类似的效果，向上滚动时会重新出现。

这个JSfiddle是我到目前为止的位置。

var pos = $(window).scrollTop(),
header = $("header");

$(window).scroll(function () {
var newPos = $(this).scrollTop();

if (newPos > pos) { //down 
    header.css('top', -(newPos) + 'px');
    if (pos > 40) {
        header.css('top', '-40px');
    }
} else { //up
    header.css('top', '0');
}


pos = newPos;

$(".last span").html(pos);
$(".new span").html(newPos);
});

因此，当您向下滚动时，标题会向上滚动，但我无法弄清楚如何以我想要的方式将其滚动回视图。尝试使用 animate() 滚动进出，但动画并不流畅。我希望标题以与滚动相同的速度移动，有什么想法吗？

4

1 回答 1

0

我有一个类似的问题来实现相同的效果，也许这可以帮助你：如果你向下滚动，则向上滑动标题，反之亦然。很高兴看到一些“书呆子”的人可以让它发挥作用？！

要按照您的说明进行操作（动画方式），您可以尝试以下操作：http: //jsfiddle.net/yckart/jzRfv/

但是，我认为让这个工作会更好！

CSS

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 128px;
    background: tomato;
    -webkit-transition: top 0.5s
}

JS

// something simple to get the current scroll direction
// false === down | true === up
var scrollDir = (function (oldOffset) {
    return function (offset) {
        var dir = offset < oldOffset;
        oldOffset = offset;
        return dir;
    };
}());


var header = document.querySelector('header');
addEventListener('scroll', function () {
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    header.style.top = -(scrollDir(scrollY) ? 0 : header.clientHeight/2) + 'px';
});
于 2013-09-09T19:49:18.293 回答