*

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

公開日: : css3, html5, jquery

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。

スクロールしたら、コンテンツが固定されるというサイトはよく見かけますが、
今回は、固定されるのではなく、あとからついてくるという事をしてみました。

まずは、デモを用意しましたので、見てください。
デモ

このようにスクロールしたらあとからサイドバーがついてくることをしたいと思います。

前回の記事にも書きましたが、
スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)
↑前回の記事

サイドバーが固定するだけでは、なんか寂しいやなんか面白いアクションをつけたいというサイトに使用するにはいいのではないでしょうか?

設置方法もとても簡単です。

早速ですが以下のソースを記載致します。

今回使用する、スタイルシートは、
index.css
以上の1つです。

scriptは、
cos.js
jquery.easing.1.3.js
以上の2つを使用します。(jquery.easing.1.3.jsは、編集する必要が無いので、ファイルを置いとくだけで大丈夫です。)

以下がindex.htmlのファイルです。
index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>スクロールしたらあとからついてくるコンテンツ</title>
		<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>  
<div id="wrapper">


<div id="left_area">
<div id="primaryNavigation">
<p><a href="#">link1</a></p>
<p><a href="#">link2</a></p>
<p><a href="#">link3</a></p>
<p><a href="#">link4</a></p>
<p><a href="#">link5</a></p>
<p><a href="#">link6</a></p>
</div>
</div>

<div id="right_area"></div>





</div>
<!--script呼び出しここから-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/cos.js"></script>
<!--script呼び出しここまで-->
</body>
</html>

次に、スタイルシートです。
index.css

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	background-color: #fff;
	margin:0 auto;
	font-size: 16px;
	width: 100%;
}

#wrapper{
	width:1000px;
	margin:50px auto;
	position:relative;
}
#left_area{
	width:300px;
	float:left;
	height: 300px;
}


#primaryNavigation {
  width:300px;
  position:absolute;
  top:0;
  left:0;/*これないとIE7が右にずれる*/
  _margin-left:-12em;/*ie6が#mainのmarginに引きづられるバグの対処*/
	background-color:#ffff00;
        text-align:center;
}


#right_area{
	position:relative;
	width:700px;
	height: 10000px;
	background-color:#00ff00;
	float:left;
}

最後にjsファイルです。
cos.js
※編集するファイルをこれだけなので、これだけを記載致します。

$(window).scroll(function(){


 var scrollTop=parseInt($(this).scrollTop());


 $('#primaryNavigation').animate({top:scrollTop},{

duration:800,//処理時間

queue:false,

easing:"easeOutCubic"//ここで動きの種類が変更できます。

});

});

以上で完成します。

補足:
index.htmlのid=”primaryNavigation”
index.cssの#primaryNavigation
cos.js#primaryNavigation

上記の3つのIDがあっていれば動かすことができます。
(なのでIDの変更をしたい場合は上記の3つが変更すればOKです。)

また、cos.jsのeasing:”easeOutCubic”//ここで動きの種類が変更できます。
この部分で動きに変化をつけることもできます。
少し変わった動きをさせてみましたので、よかったら見てください。

デモ02

これは、
easing:”easeOutCubic”//ここで動きの種類が変更できます。

easing:”easeOutBounce”//ここで動きの種類が変更できます。

に変更しました。

まとめ
どうしてもコンテンツが長いとサイドバーが寂しくなってしまうので、ぜひ試してみてください。

今回参考にしたサイトがありますのでこちらも参考にしてみてください。
乱雑モックアップ

今回デモで使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
ダウンロード


関連記事

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

スクロールバーのカスタマイズ。jScrollPaneを使用してみました。

今回は、スクロールバーのカスタマイズに取り組んでみました。   サイトにスクロ

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑