スクロール時サイドバーを左側固定位置に配置の方法
スクロール時サイドバーを左側で固定位置に配置する方法
最近よくみかける、
画面を一定量スクロールした時、ページ途中にあるサイドバーなどを固定位置に配置する方法
を実現させたいと思っています。
で、固定したいサイドバーは左側です。
そして、後述の方法だと可能なのですが、
メイン部分（#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.2/jquery.min.js"></script>
<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>
お礼
回答ありがとうございました！ フレームはいろいろ問題があるんですね・・・ いまはフレームより、PHPのほうが多く使われるみたいですね