• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2012/11/20

[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する

Skitched 20121120 005330
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるヤーツ。
手順メモを晒しておきます:)

まずはjQuery本体をheadタグ内に埋め込みませう。
やり方は「jQueryが全く分からない人のため」の超初級者向け入門講座をご参照のこと。

jQuery

続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。

	$(function($) {
	var tab = $('.hoge'),
    offset = tab.offset();

$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {
    tab.addClass('fixed');
  } else {
    tab.removeClass('fixed');
  }
});
});

↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令をしています。
.hogeは固定させたい要素のクラス、IDなどを入れましょう。

 

CSS

.fixed{
	position:fixed;
	top:20px;/*固定させたい位置*/
}

あとはスタイルシートに.fixedの固定させたい位置を追加するだけ。あらやだ簡単。




まぁあんまりやり過ぎるもなんですけど、実際当サイトではソーシャルボタンを固定させる仕様にしてからSNSにシェアされる数が増えました。やってみたい方は是非どうぞ:)

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 | OZPAの表4

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×