*

-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

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

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

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

記事を読む

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

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

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

Message

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

PAGE TOP ↑