問題: 下にスクロールしたらヘッダを隠し,上に戻ってきたら再度ヘッダを表示したいがスクロールと同時にするとスクロールによる移動と隠すモーションが重なって気持ち悪い.
解決策: スクロール位置を定期的に監視して以前と変わっていなかったら表示/非表示する.
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のライブラリとかにスクロールの停止イベントを発行してくれる奴があるけどわざわざ導入するのがめんどくさかった.