*

スクロールしても固定されるコンテンツの作成方法。(“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しときましたので、
よかったら参考にしてみてください。
ダウンロード


関連記事

no image

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

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

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

htmlの書き方について。

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

no image

背景画像だけ透明にしたい。background-color:rgbaを使う。

今回は、背景画像だけを透明にしてみました。 背景の上に透明な色を乗せたいや、テキストを書く要素

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑