「忠犬もちしば」のAIボットを作ろう!

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

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

なおまた、IE11だと固定すらしません。

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

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

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

=====
以下コード(タブを全角空白4つに変換してあります)
================

<!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>

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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 … )
    • good
    • 0

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



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

fixedを使います。

この回答への補足

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

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

補足日時:2014/06/06 11:16
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q左メニューをCSSで固定したい

左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。
固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。
これをフレームを使わずに作ることはできないでしょうか?
できればカクカクしないようなメニューが作りたいです。

■■■■■■■■■■■■■
■menu  ■ main      ■
■      ■          ■   
■       ■          ■
■      ■          ■
■■■■■■■■■■■■■
・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる
・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール

【HTML】
<div id="main">
メインの内容
</div>
<div id="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
・・・・(26項目)
</ul>
</div>

【css】
#main{
float:right;
}
#menu{
width:160px;
position:fixed;
_position:absolute;
top:30px;
left:0px;
}

左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。
固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。
これをフレームを使わずに作ることはできないでしょうか?
できればカクカクしないようなメニューが作りたいです。

■■■■■■■■■■■■■
■menu  ■ main      ■
■      ■          ■   
■       ■          ■
...続きを読む

Aベストアンサー

メニューのCSSを以下のようにしてみたらどうでしょう。

#menu{
width:160px;
position:fixed;
_position:absolute;
top:30px;
left:0px;

height: 100%;
overflow: auto;

}

overflow: auto;
としておけば領域からはみ出した場合だけ、スクロールバーが表示されます。

Qcss固定したフッターが本文と重なってしまいます

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定したのですが、
ウィンドウを小さくしたり、長い文を書いたりすると、
メインの記事がフッターと重なって読めなくなってしまいます。
記事が短い時は、ページ全体の下部に、
長い時はスクロールした一番下にくるようにしたいです。
テーブルのheight指定を使えば同じような効果は得られますが、
テーブルの無いレイアウトをやってみたかったので。
同じような質問は発見したのですが、いい解答が見つかりませんでした。

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定...続きを読む

Aベストアンサー

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出した内容の扱い(Overflow)
scroll 内容を切り抜く。

次に、オーバーラップを回避した書き方を一応示しておきます。
Left<br/>を追加して、スクロールバーが出ることをご確認下さい。

<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Test</TITLE>
  <STYLE type="text/css">
  #left {
  position:absolute;
  top: 130px;
  left: 100px;
  width: 300px;
overflow-y: scroll;
  }
  #main {
  position:absolute;
  top: 130px;
  left: 400px;
  }
  #right {
  position:absolute;
  top: 130px;
  left: 700px;
  }
  #footer {
  position:absolute;
  bottom: 0px;
  left: 100px;
  }
  </STYLE>
</HEAD>
<BODY>
<div id="left">
 left<br/>
</div>
<div id="main">
 main
</div>
<div id="right">
 right
</div>
<div id="footer">
 footer
</div>
</BODY>
</HTML>

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出...続きを読む

QJSPで