12月更新・前月(11月)の人気記事トップ10 12/07/2023
- ( 02 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 01 ↓) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 05 ↑) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- (圏外↑) 【jQuery】入門11. switch文による条件分岐
- (圏外↑) 【Mac】Safariでソースコードを見る方法
- ( 09 ↑) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- (圏外↑) 【jQuery】入門7. jQueryで新しいWindowを開く
- (圏外↑) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
【Labs】スクロールしても要素が固定するスティッキーサイドバー
こんにちは（・∀・）
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">© 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】ヘッダーをトップに固定してスクロールでアニメーション
【Labs】グローバルナビをトップに固定するスティッキーナビ+ドロップダウンメニュー
【Labs】グローバルナビをトップに固定するスティッキーナビ