CSSとJSで、スクロールして一定の場所を過ぎると、上部固定するメニューを作る - Qiita
追記：iPhoneなどのスマホでも気持ちよくなるように修正 なんか最近スマホサイトとかでよく見る、ちょっとスクロールすると、ページ途中にあるメニューがヘッダーに固定されるようなやつ。ヘッダー全体が最初から固定なんじゃなくて、流動的っぽいの。試しに実装してみた。 jQuery使ってるけど、特にjQueryである必要はない。普通のJavaScriptなら、document.getElementById().offsetTopでOK。 <header> <h1>Title</h1> <nav id="global-nav"> <a href="">hogehoge</a> </nav> </header> <section> <p>piyopiyo</p> </section> jQuery(function() { var nav = jQuery('#global-nav'); // メニュ
jQueryでページ最下部のスクロール時のイベントをキャッチする
ユースケースとしては、Twitterのタイムライン表示ページのように最下部までスクロールしたら、そのイベントをキャッチして次ページのツイートをAutoloadして表示させたい！みたいなとき。 $(window).on("scroll", function() { var scrollHeight = $(document).height(); var scrollPosition = $(window).height() + $(window).scrollTop(); if ((scrollHeight - scrollPosition) / scrollHeight === 0) { // when scroll to bottom of the page } }); 上コードでは、ウインドウのスクロール時にスクロール位置が今どれだけなのかを差分を見て計算してる。それが0以下になったら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
