暮らしの技術

暮らしを豊かにする技術や、特に暮らしを豊かにしない技術があります

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

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

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

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