*

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

公開日: : html5, jquery

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

デモ
このように一部分がスクロールしても固定されます。

コンテンツが長い際に、どうしても空いたスペースができてしまう。

そうなると、なんだか寂しいサイトになってしまいます。

そんな時にこのようにスクロールしても一部が固定されるととても見やすく、空いたスペースを埋める事ができます。

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

では、早速以下にソースを記載します。

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

scriptは、
box-fixed.js
以上の1つを使用します。

以下が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">縦10000pxの設定にしました。</div>
		<div id="right_area"><div id="box">スクロールしても固定される。</div></div>
<div class="clear"></div>
		<div>スクロール終了です。お疲れ様でした。</div>
	</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/box-fixed.js"></script>
<script type="text/JavaScript">
$(function(){
    $("#box").boxfixed();
});
</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%;
}
.clear{
	clear:both;
}


#wrapper{
	width:1000px;
	margin:50px auto;
	position:relative;
}

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

#right_area{
	width:300px;
	float:left;
}

#box{
	width:300px;
	height: 300px;
	background-color:#ffff00;
}

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

最後にjsファイルです。
box-fixed.js

(function($) {

$.fn.boxfixed = function(options){

  var settings = $.extend({
    fixtop: 0
  }, options);

  var obj = $(this),
  offset = obj.offset();

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

})(jQuery);

以上で完成です。

固定する箇所(デフォルトではTOPから0px)の変更もできるみたいです。

今回参考にしたサイトがありますのでこちらも参考にしてみてください。
【jQuery】スクロールの途中から位置が固定されるコンテンツの設置方法 | Rapid Progress

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


関連記事

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

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

記事を読む

no image

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

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

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

no image

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

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

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

Message

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

PAGE TOP ↑