sticky-kitを使ってサイドバーの2つ目のみをついてくるようにする方法と諸問題の解決と解説

WS001016
このエントリーをはてなブックマークに追加
PR

jQueryのプラグインsticky-kitを使えばサイドバーなどが、画面についてくる様にすることが出来るプラグインです
導入はとても簡単です、そこでもう一工夫を加えて使い方を紹介します

http://leafo.net/sticky-kit/

 

sticky-kitで2段目(2つ目)のサイドバーのみをついてくるようにする方法

stiky
CONNTENの大きさが大体MAINの大きさとなることが多いですので
その大きさの一番下までSIDE2が移動します

stiky3

デモページ1

ソースの一部

ヘッダーでプラグインの読込
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.sticky-kit.min.js"></script>
</head>

HTML本文
<div class="main">
    <div class="content"><h3>コンテンツエリア</h3></div>
    <div class="side-1">サイドバー1</div>
    <div class="side-2">サイドバー2</div>
</div>

スクリプト
<script>
$(".side-2").stick_in_parent();
</script>

 

SIDE2だけを移動させようと思うと、CONTEN、SIDE1、SIDE2すべてがMAINの直接の子要素でなくてはなりません
なのでSIDEでSIDE1とSIDE2をまとめてしまうと、SIDE2の親はSIDEになってしまいます

今回はCONTEN+SIDE1の幅をMAINと同じ幅にすることで、float:leftでCONTENTがSIDE1よりも高さがある場合
自動的にSIDE1の下に来るようになります

 

 

ここで一つ問題が
CONTENがSIDE1よりも小さい時、SIDE2がCONTENTの下に来てしまう問題

stiky4

(MAIN自体の高さも変わります)

 

 

こういう場合には、jQueryを使ってSIDE1の高さ+SIDE2の高さを求めて
それをCONTENTの高さにしてしまいます
この時は固定値にするとCONTENTがSIDE1+SIDE2の時よりも大きい時にコンテンツが途切れてしまうので
min-heightを使います

stiky5

デモページ 2

スクリプトに高さを合わせるのを追加

var h = $(".side-1") . height();
var h2 = $(".side-2").height();
$('.content').css("min-height",h+h2);
$(".side-2").stick_in_parent();

 

 

これでサイドバーより短い場合には、min-heightでCONTENを同じ高にすることが出来レイアウト
短い時のレイアウトの崩れは無くなります

 

これだと、まだ問題があります。
javascriptを使っていないブラウザだと、CONTENTが短い場合レイアウトは崩れたままになります

 

javascriptが有効ではない時でもレイアウトを崩さずにする方法

stiky6

サイド自体を一つの塊にして、そのなかでSIDE2を動かしてしまおうという考え方です
この場合はCONTENTがSIDEよりも短くてもレイアウトは崩れません

この場合、SIDE2の親要素がMAINからSIDEに変わりますので
そのままでは使えません

そこで先ほどやった、SIDE1+SIDE2の高さをCONTENTの高さにするという発想を逆にして
CONTENTの高さをSIDEの高さにする

同じくmin-heightを使うことで、CONTENTの方が短くても影響は出ません

デモページ3

SIDEを追加し、高さを求める部分を変更

<div class="main">
    <div class="content"><h3>コンテンツエリア</h3></div>
    <div class="side">
        <div class="side-1">サイドバー1</div>
        <div class="side-2">サイドバー2</div>
    </div>
</div>

スクリプト
<script>
var h2 = $(".content").height();
$('.side').css("min-height",h2);
$(".side-2").stick_in_parent();
</script>

 

追記:親要素を直接指定するもっと簡単な方法がありました
こちらで別に書きました

PR

COMMENT

  1. kunihide

    参考にしました

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)