スクロール時サイドバーを左側固定位置に配置の方法

締切済

質問者：dicemiyagawa
質問日時：2014/06/05 14:32
回答数：3件

スクロール時サイドバーを左側で固定位置に配置する方法

最近よくみかける、
画面を一定量スクロールした時、ページ途中にあるサイドバーなどを固定位置に配置する方法
を実現させたいと思っています。
で、固定したいサイドバーは左側です。
そして、後述の方法だと可能なのですが、
メイン部分（#main）をfloat:rightからfloat:leftにかえると、
ある程度スクロールしたあとsideとメイン部分のdivが重なってしまいます。

なおまた、ＩＥ１１だと固定すらしません。

とりあえず、わからなくても実現できればいいので、
画面を一定量スクロールさせたあと、左側のサイドバーが固定される方法をお教えいただけないでしょうか？
（ＵＲＬだけでもかまいません）

どうも検索しても、右側のサイドバーを固定している例ばかりでして、左側固定を探しています。

よろしくお願い申し上げます。

＝＝＝＝＝
以下コード（タブを全角空白４つに変換してあります）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画面を一定量スクロールした時、ページ途中にあるサイドバーなどを固定位置に配置する方法（DEMO）</title>
<style>
* {
　　　　margin : 0;
　　　　padding : 0;
}
body {
　　　　color: black;
　　　　background: gray;
}

h1 {
　　　　font-size: 14px;
　　　　font-weight: bold;
　　　　margin: 10px;
}
h3 {
　　　　font-size: 14px;
　　　　font-weight: bold;
　　　　margin-bottom : 10px;
　　　　padding : 0;
}

/*********************************************************************/
#side {
　　　　background: white;
　　　　border-top: 4px solid black;
　　　　border-bottom: 4px solid black;
　　　　color: black;
　　　　display:inline-block;
　　　　font-size: 14px;
　　　　height: 300px;
　　　　padding: 0px;
　　　　width: 200px;
　　　　float:left;

}

.fixed {
position: fixed;
top: 10px;
　　　　float:left;
　　　　width: 200px;;
z-index: 10000;
}
/*********************************************************************/

#tops {
　　　　background: white;
　　　　border: 4px solid black;
　　　　border-radius: 6px;
　　　　margin: 10px auto;
　　　　width: 900px;
}

#main {
　　　　background: white;
　　　　border: 4px solid black;
　　　　border-radius: 6px;
　　　　color: black;
　　　　font-size: 14px;
　　　　float: right;
　　　　height: 5000px;
　　　　margin-right: 10px;
　　　　margin-bottom: 10px;
　　　　padding: 10px;
　　　　width: 540px;
}

#goal {
　　　　margin: auto;
　　　　width: 900px;
　　　　display: block;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8. …
<script type="text/javascript">
$(function($) {
　　　　var tab = $('#glovalnavi'), offset = tab.offset();
　　　　$(window).scroll(function () {
　　　　　　　　if($(window).scrollTop() > offset.top) {
　　　　　　　　　　　　tab.addClass('fixed');
　　　　　　　　} else {
　　　　　　　　　　　　tab.removeClass('fixed');
　　　　　　　　}
　　　　});
});
</script>
</head>

<body>
<div id="tops">
<h1>画面を一定量スクロールした時、ページ途中にあるサイドバーなどを固定位置に配置する方法（DEMO）</h1>
</div>

<div id="side">
<h3>side部分</h3>
<p>
この部分がスクロールされても、残ります。
</p>
</div>

<div id="main">
<h3>メイン部分</h3>
<p>
上下にスクロールしてみてください。<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお<br>
あいうえお</p>
</div>

<div id="goal"></div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2014/06/05 16:33

fixedを使います。

この回答への補足

ご回答ありがとうございます。

tab.addClass('fixed');
として、fixedを使っているつもりなのですが。。。カン違いしているでしょうか？

補足日時：2014/06/06 11:16

通報する

- 0
- 件

通報する

No.2

回答者： warez
回答日時：2014/06/07 13:44

#mainを絶対配置してしまうとか。

#main {
position: absolute;
left: 300px;
/* 以下略 */
}

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2014/06/07 15:11

No.1です。

基本的な考え方は、absoluteとfixedの組み合わせです。
　absoluteもfixedも、それが含まれる部分から切り離されるため、他の要素はあたかもそれが存在しなかったように振舞います。
　⇒9.3.1 位置決め方式の選択: 'position'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
absolute
　絶対配置のボックスは通常フローの範囲外である。これはボックスが以降の兄弟に影響を与えないことを意味する。
fixed
　handheld、projection、screen、tty、tvメディアタイプの場合、ボックスはビューポートに対して固定され、スクロール時に移動しない。

　注意点は、absoluteは、staticでない直近のコンテナブロックの位置を基準にし、fixedはビューポート(表示範囲)を基準にするという事です。
　absoluteで指定されていたものが、スクロールされて末端まできたら、fixedに切り替わるわけです。

＞メイン部分（#main）をfloat:rightからfloat:leftにかえると、
　floatは使えないことが分かると思います。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

文書構造的には
<body>
　<header>
　</header>
　<section>
　　<nav>
　　　<ol></ol>
　　</nav>
　</section>
　<footer>
　</footer>
</body>
とする。
★HTMLより前のHTMLでしたら、それぞれ「id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」のですから、<div class="header">と読み替えてください。

詳しい説明や方法は参考ページを挙げておきます。

＞画面を一定量スクロールさせたあと、左側のサイドバーが固定される方法をお教えいただけないでしょうか？
　なお、この方法は欠点もあります。左側--ナビゲーションをクリックしてリンクしたらナビゲーションの位置が変わってしまうということになり、ユーザーインターフェース的には使いづらいものになります。
　当初からfixedにしておいて、そこに収まる程度のメニューにして、必要ならプルダウンにしておくほうが圧倒的に使いやすくなると思います。だから私は使わない。
　リンク先のページでは、head内にカレントのメニューは開いたままにするスタイルを追加する。

　⇒サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed - Cyokodog :: Diary( http://d.hatena.ne.jp/cyokodog/20110904/exflexfi … )