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 に答える