ページ途中で出てくるナビゲーションが、スクロールして画面の一番上に来ると

固定されて以降ずっとついてきます。

今回はナビゲーションで使用していますが、スクロールして要素が画面の

一番上の位置に来た時に固定されるので、サイドバーなどにも使えます。

▼以下が実際のソースサンプルです。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(function($) {
  
	var nav    = $('.nav'),
   		offset = nav.offset();
  
	$(window).scroll(function () {
 		 if($(window).scrollTop() > offset.top) {
  		  nav.addClass('fixed');
 		 } else {
  		  nav.removeClass('fixed');
 		 }
	});
});


</script>

▼CSS

<style type="text/css">
body, div, p, ul, li, h1, h2, h3, h4, h5, h6, embed, object {
	margin: 0;
	padding: 0;
}
body {
	background-color: #CCF;
	font: 100% Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 200%;
	text-align: center;
	padding: 20px;
	height: 100px;
}
.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after {
	clear:both;
}
#content {
	background: #fff;
	height: 1000px;
	margin: 0 auto 60px;
	width: 780px;
}
.nav {
	margin: 0 auto;
	width: 780px;
	background-color: #bbb;
}
.nav li {
	list-style: none;
	float: left;
}
.nav li a {
	text-decoration: none;
	color: #fff;
	padding: 10px 20px;
	display: block;
}
.nav li a:hover {
	background: #aaa;
}
.fixed {
	position: fixed;
	top: 0;
}
p{
	text-align: center;
	padding-top: 350px;
	font-weight: bold;
	font-size: 36px;
}
</style>

▼HTML

<div id="content">
<div class="nav">
  <ul class="clearfix">
    <li><a href="#">MENU</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">MENU</a></li>
  </ul>
</div>
  <p>sample</p>
</div>

今回、参考にさせていただいたのは、
『ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery – WPC』さんです。
ありがとうございます。

デモページは、こちら