【JS/jQuery】scrollTopの値が0になってしまう
こんにちは、しきゆらです
最近は講義の一部としてWebサイトを作っています
そんな中でスクロールしたときに、ヘッダーのメニュー(所謂、ナビゲーションバー？)を画面上部に固定させたいと思いJavaScriptで実装していました
その時に、躓いてしまった部分がタイトルの通り「scrollTop」の値が常に0を返してしまい思うような挙動になりませんでした
それについて、メモしておきます
メニューを固定する方法を調べていて、大抵のサイトでは「$(window).scrollTop()」でスクロール量を取得して、メニューの位置より下にスクロールしたときに固定する、というもの
それを実装したとき、なぜかscrollTopが常に0を返してしまうという問題が発生しました
結論から
結論は、
html, body {
overflow-x: hidden;
}としていたことが原因でした
これは、とあるボタンをクリックしたときにbody全体を右にずらす、という動きを付けていて
その時に画面下にスクロールバーが出てしまうので、表示しないようにこれを付けていました
しかし、これが原因でscrollTopが常に0を返していたわけです
この部分を削除すると、きちんと取得してくれるようになりました
こちらを立てると、あちらが立たず・・・
メニューを画面上部に固定することができましたが、横方向のスクロールバーが出てしまい
その部分をどのように対策しようかと悩んでいることころです
何か、両方をうまく動作させる方法を知っている方がいらっしゃいましたら教えてください