Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

Web初心者がjQuery スクロールするとコンテンツが追従するを実装する方法(サンプル付き)

投稿日:

今回も、web初心者向けにスクロールするとコンテンツが追従するのjQueryを実装します。

スクロールするとコンテンツが追従する
photo credit: Kalexanderson via photopin cc

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

実際に動く記述を書きます STEP2

$(function() {
	var $sidebar	= $("#sidebar"),
		$window		= $(window),
		offset		= $sidebar.offset(),
		topPadding	= 15;

	$window.scroll(function() {
		if ($window.scrollTop() > offset.top) {
			$sidebar.stop().animate({
				marginTop:$window.scrollTop() - offset.top + topPadding;
			});
		} else {
			$sidebar.stop().animate({
				marginTop:0;
			});
		}
	});
});

「topPadding」はスクロールした時に追従するコンテンツの上部分の余白です。

追従するHTMLを設置します STEP3

<div id="sidebar">        
                <ul>
                    <li>yahoo</li>
                    <li>google</li>
                    <li>msn</li>
                    <li>livedoor</li>
                </ul>    
            </div>

idが「sidebar」の箇所がスクロールすると追従します。
※中身は<ul>で作っていますが何でも良いです。

まとめ

[サンプル] jQuery スクロールすると追従するコンテンツ

よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。この追従のjQueryですが、サイトでよく使われているのを見かけます。 メインコンテンツが縦に長くて、サイドのコンテンツが少ないときなどに使えます。

※firefox、クローム、IEで動いていることを確認しております。

今回の記事を作ったときに参考にしたサイト [参考サイト]

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.