9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【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】グローバルナビをトップに固定するスティッキーナビ