menu
menu

スクロールしても要素が固定するスティッキーサイドバー | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook7
  • はてなブックマーク5
  • Google+10
  • Pocket0
  • Twitter0

スクロールしても要素が固定するスティッキーサイドバー

  • Labs

jQuery

こんにちは(・∀・)

 jQueryを使用したサンプルをご紹介します。今回はスクロールしても画面内で要素を固定させるスティッキーサイドバーです。

サンプルデモ

 サンプルデモはこちら!


HTML

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="header">
<h1><a href="http://www.webdlab.com/">Webデザインラボ</a></h1>
</div>
<div id="content">
<div id="main-content">
content
</div>
<div id="side">
<div class="side-inner">
<p class="sidetop">top</p>
<p class="sidemid">mid</p>
<p class="sidebtm">btm</p>
</div>
</div>
</div>
<div id="footer">
<div id="copyright">&copy;WEB DESIGN LAB<!--copyright--></div>
</div>
CSS

#header {
	padding: 10px;
	background: #fff;
	margin-bottom: 20px;
}
#content {
	overflow: hidden;
	width: 1000px;
	background: #fff;
	margin: 0 auto;
}
#side {
	float: left;
	width: 300px;
	float: left;
	position: relative;
}
.side-inner {
	width: 300px;
	margin-bottom: 20px;
	position: absolute;
}
.side-inner .sidetop {
	width: 260px;
	height: 170px;
	margin: 0 10px 10px 10px;
	padding: 10px;
	background: #d49fc2;
}
.side-inner .sidemid {
	width: 260px;
	height: 170px;
	margin: 0 10px 10px 10px;
	padding: 10px;
	background: #d49fc2;
}
.side-inner .sidebtm {
	width: 260px;
	height: 180px;
	margin: 0 10px 0 10px;
	padding: 10px;
	background: #d49fc2;
}
#main-content {
	float: left;
	width: 680px;
	height: 1000px;
	padding: 10px;
	background: lightgray;
}
#footer {
	margin-top: 20px;
	padding: 10px;
	color: #eee;
	background: #9fb7d4;
}
JavaScript

$(window).load(function(){//1読み込んだ時
var side = $(".side-inner");
var foot = $("#footer")
var sideHeight = side.outerHeight(true);
var sideTop = side.offset().top;
$(window).scroll(function(){//2スクロールした時
var scrollTop = $(this).scrollTop();
var footTop = foot.offset().top;
winTop = footTop - (scrollTop + sideHeight)
if(scrollTop > sideTop){//2-1サイドの上部が画面より上になったとき
if(scrollTop + sideHeight > footTop){//3-1フッターが出てきたら
//フッターにあわせて移動
side.css({position: "fixed", top: winTop + "px","width": "300px"});
/*3-1*/} else {//3-2フッターはまだ出てこない
//固定
side.css({position: "fixed", top: "0px","width": "300px"});
/*3-2*/}
/*2-1*/} else {//2-2サイドの上部が画面より下になったとき
//固定解除
side.css({position: "static", top: "auto","width": "300px"});
/*2-2*/}
/*2*/});
/*1*/});

関連リンク

 グローバルナビをトップに固定するスティッキーナビ+ドロップダウンメニュー

 グローバルナビをトップに固定するスティッキーナビ

  • カテゴリー:Labs
  • facebook7
  • はてなブックマーク5
  • Google+10
  • Pocket0
  • Twitter0