ウェブ、ショウジン

サイドメニューとフッターメニューをCSSのposition:fixedで固定する例 *一応「IE6」もいける。

2012-6-20
Category
CSS

サイドメニューとフッターメニューをCSSのposition:fixedを使って固定したデモとそれについてのメモ。

詳しくはデモページおよびそのソースを参照のこと。

固定以外にも、最近よく見る「ある程度スクロールするとページ先頭へのリンクがスルッと出てくる」とか、ページ先頭へもどる際にアニメーション効果をもって「スルスルッ」ともどるとかも合わせて実装。

スクリーンショット(2012-06-20 11.02.33)

以下のソースはそれらに該当する部分だけを記述。

CSS

<style type="text/css">
body{
	background:url(_shared/img/noise_pattern_with_crosslines.png);
	margin-bottom:300px;

	/* IE6対策 */
	/* スクロール時にビビビってなって居た堪れないので */
    background-attachment: fixed;
}

#wrapper{
	width:800px;
	margin:30px auto;
	padding-bottom:100px;
}

#gMenu{
	width:200px;
	float:left;
	position:fixed;
	top:30px;

	/* IE6 */
	_position:absolute;
        _top:expression(eval(document.documentElement.scrollTop+30)+'px');
}

#footer{
	position:fixed;
	bottom:-5px;
	padding-left:540px;

	/* IE6 */
	_position:absolute;
	_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-55)+'px');
}
</style>

JavaScript

<script type="text/javascript">
$(function(){
	// ページ先頭から「設定した値」をスクロールダウンするとフッターメニューが出現
	var footerMenu = $("#footer");
	footerMenu.hide();
	$(window).scroll(function(){
		if($(this).scrollTop() > 100){
			footerMenu.fadeIn();
		}else{
			footerMenu.fadeOut();
		}
	});

	// 先頭へ戻る(スルスルっとアニメーション効果をもって) 
	var linkToTop = $("#linkPagetop");
	linkToTop.click(function(){
		$("body, html").animate({
			scrollTop:0
		}, 500);
		return false;
	});
});
</script>

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿