スクロール途中から要素がついてくる

スクロールしている途中で要素がついてくるようにする方法です。

まずCSSでついてくる時のクラスを書きます。

.fixed {
  position: fixed;
  top: 100px;
}

javascriptで必要な位置までスクロールしたら要素にfixedクラスを追加するようにします。

var follow = $('#follow'), offset = follow.offset();
(window).scroll(function () {
  if($(window).scrollTop() > offset.top - 100) {
    follow.addClass('fixed');
  } else {
    follow.removeClass('fixed');
  }
});

 

カテゴリ：jquery 投稿日時：2016年9月3日 15:41

シェア

コメント

コメントはまだありません。

コメント投稿

ご自由にコメントください！
※一度投稿すると削除できませんのでご注意ください。管理者の独断と偏見で削除する場合があります。コメント機能は予告なく停止する場合があります。

ニックネーム

コメント

カテゴリ

新着備忘録

Cakephp3.8 dateの時間が日本時間にならない！

Cakephp3.8 dateの時間が日本時間にならない場合の対処法です。

ページネーションの関連モデルでの並び替え　CakePHP3

CakePHP3のページネーションの関連モデルでの並び替え方法です。

スマホでもPDFをiframeで表示するPDF.js

PDF.jsで、スマホでもPDFをiframeで表示することができます。

PHPからslack APIでチャンネルにメッセージを送信する

PHPからslack APIでチャンネルにメッセージを送信する方法です。

CakePHP3にUpload Pluginをインストール

CakePHP3にUpload Pluginをインストールする方法です。