読者です 読者をやめる 読者になる 読者になる

無知を晒す

ふだんの出来事はこっちに書いてます: http://tana.hatenablog.com

スクロールが停止したタイミングで要素を隠したり表示したりする

問題: 下にスクロールしたらヘッダを隠し,上に戻ってきたら再度ヘッダを表示したいがスクロールと同時にするとスクロールによる移動と隠すモーションが重なって気持ち悪い.

解決策: スクロール位置を定期的に監視して以前と変わっていなかったら表示/非表示する.

var prevScrollY = 0
setInterval(function(){
    if (prevScrollY == scrollY){
        if (scrollY <= 41) {
            $('#header').animate(
                {top: "0px"},
                {duration: 100,
                 queue: false});
        } else if (scrollY > 41) {
            $('#header').animate(
                {top: "-41px"},
                {duration: 100,
                 queue: false});
        }
    } else {
        console.log("scrolling....");
    }
    prevScrollY = scrollY;
}, 250);

jQueryのライブラリとかにスクロールの停止イベントを発行してくれる奴があるけどわざわざ導入するのがめんどくさかった.