クリエイター：コーディング備忘録ブログ

RSS

コーディング

jQueryでスクロール位置を取得

2018.08.22

jQueryでスクロールイベントでページの指定した場所に移動したり、一定までスクロールした時に、
ナビゲーションを表示させるといったことも可能です。

スクロール位置を取得するためには scrollTop() メソッドを使います。

ウィンドウ全体でスクロール量を習得したい場合$(window)を使います。

$(window).scrollTop();

1	$(window).scrollTop();

<script>
  $(window).scroll(function() {
    var Scr = $(document).scrollTop();
 
    $('#ScrValue').val(ScrTop);

    if(Scr > 300){
      $('.menu').css('position','fixed')
    }

  });
</script>

<input type="text" size="10" value="0" id="ScrValue" />

<ul class="menu">
  <li><a href="#">メニュー</a><li>
  <li><a href="#">メニュー</a><li>
  <li><a href="#">メニュー</a><li>
</ul>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<script>

$(window).scroll(function() {

var Scr = $(document).scrollTop();

$('#ScrValue').val(ScrTop);

if(Scr > 300){

$('.menu').css('position','fixed')

}

});

</script>

<input type="text" size="10" value="0" id="ScrValue" />

<ul class="menu">

<li><a href="#">メニュー</a><li>

<li><a href="#">メニュー</a><li>

<li><a href="#">メニュー</a><li>

</ul>

上記では、スクロール量が200を超えると固定されるメニューを作成することができます。
他にもページトップボタンやスクロールした時にグローバルナビを上部に固定したりいろいろなことができます。

この記事を見た人は次の記事も見ています。

jQueryで関数を使用

前の記事

wpで会員制サイトをプラグインで作成

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

CSSでトリミング　object-fit

2018.07.25

コーディング

使用されているフォントを調べる

2017.10.03

コーディング

レスポンシブサイトの印刷でスマホ用のレイアウトになるときの対処法

2019.01.09

コーディング

HTMLジャンプリンク

2021.12.10

コーディング

Flexbox

2017.08.03

コーディング

DreamWeaverでの検索/置換機能

2016.05.16