menu
menu

キーワード検索

 

前月(7月)の人気記事トップ10

  1. ( 1-) CSSだけでドロップダウンメニュー
  2. ( 2-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) スマホサイトの作成・基本編
  4. ( 4-) CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) jQueryで日時を表示【実践でjQuery入門】
  6. ( 5↓) 表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 9↑) スマホサイト向け横にスクロールするナビゲーション
  8. ( 8-) HTML5・ページ作成の基本
  9. ( -↑) Windows 10にMySQLをインストール
  10. ( -↑) 変数を宣言する【jQuery入門】

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

  • Labs

jQuery

こんにちは(・∀・)

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

サンプル
HTML

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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;
  padding: 10px;
  background: #d49fc2;
}
#main-content {
  float: left;
  width: 680px;
  height: 1000px;
  padding: 10px;
  background: lightgray;
}
footer {
  text-align: center;
  padding: 10px 0 40px 0;
}
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*/});
Result

サンプルデモはこちら


関連リンク

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

  • カテゴリー:Labs