Floating HTML Menu


Description: スクロールに応じてアニメーションでサイドメニュー部分のみ追従してきます。IE6でも動作してくれるので、position:fixed;の替わりに使うのも手ですね。マークアップもシンプルで使い勝手の良いプラグインです。
Sample: demo
Tutorial: Creating a Floating HTML Menu Using jQuery and CSS
License: -

Note

<script language="javascript" src="jquery.dimensions.js"></script>
<script language="javascript">
	var name = "#floatMenu";
	var menuYloc = null;

		$(document).ready(function(){
			menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
			$(window).scroll(function () {
				offset = menuYloc+$(document).scrollTop()+"px";
				$(name).animate({top:offset},{duration:500,queue:false});
			});
		});
	 </script> 

プラグインを読み込んで設定します。

Related snippet :

  • Description: 横長で可愛いコンテンツスライダーです。オート機能も追加されたようです。縦横のサイズを決めれば画像に限らず、様々なコンテンツを入れることが可能で、1ペ ...
  • Description: jQueryを使ってWYSIWYGを構築します。機能としてはやや乏しいですが、これはこれで面白いですね。一応、WYSIWYGの基本的な機能は揃ってい ...
  • Description: マウスを追従するプルダウン形式のメニューとスクロールトップのリンクを実装するプラグインです。使い方次第ではユーザビリティにも自己満足にもなり得ますの ...
  • Description: スクロールバーのデザインを変えるプラグインです。Flashではよく見かけたスクロールバーのデザインを全ブラウザで実装できます。デザインにより統一 ...
  • Description: 数値に合わせてバーの長さをアニメーションしながら視覚化するプラグインです。比較用のグラフはなかなか需要が高いので、こうした見せ方は効果あるかも知れま ...
  • Description: ページ内アンカーリンクをグラフィカルな目次にして表示します。縦長のページ内の目次として使うことができそうですね。jQueryUIを必要とします。 ...
  • Description: iGoogleのようにコンテンツをドラッグ&ドロップで動かせるインターフェースを実装できます。クロスブラウザで動作してくれるので管理画面などにもいい ...