画面をスクロールした時にページ途中にある部分をスクロールさせずに固定して表示する方法
★css
<style type='text/css'>
.fixed {
position: fixed;
width: 100%;
z-index: 10000;
}
#side {
display:inline-block;
}
</style>
★javasript
<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 = $('#side'), offset = tab.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
tab.addClass('fixed');
} else {
tab.removeClass('fixed');
}
});
});
</script>
★html
<div id="side">
固定して表示する場所
</div>