スクロール追尾型メニューリストを作ってみる
昨日のエントリーで書いたjQueryでのスクロール制御を応用して、 追尾型メニューリストを作ってみました。 Webページ画面の左だったり右だったりに配置してあるメニューリストを スクロールをしても位置を固定して画面上から消えないようにするもの。 縦に長くなってしまうサイトなどでは、 これがあるとユーザーにも親切な感じがします。（うっとおしく思う人もいるみたいですが。。。） 今回作るサンプルはサイトヘッダーが高さ「50px」の場合を基準にしています。 ※もちろんここの値はどんな形にでも変更可です。 まずは動作サンプルから。 動作サンプルを別枠で表示する iframe内をスクロールすると画面左のメニューリストが ヘッダーを過ぎた時（ページ上部から50pxを過ぎた時）に固定となり ページ内に留まります。（IE6では少々ガタつきますが、もうIE6は放っておきます…） そして、スクロール位置がヘッダ
position: fixed;でサイドに固定してjQueryでスライドして現れるメニュー
では、設置方法を説明してみます。 固定されたスライドメニューの作成 まず、head内でjQueryを読み込みます。もちろんjQueryは自分のサーバーにアップしてもかまいません。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> メニュー自体は簡単なリストメニューで構成されています。#のところはそれぞれリンク先のアドレスに変更してください。 <ul id="navi"> <li class="home"><a href="#"></a></li> <li class="rss"><a href="#"></a></li> <li class="facebook"><a href="#"></a></li> <li cla
jQueryで、透過pngをIE6に対応させる
jQueryで、透過pngをIE6に対応させる jQuery2008年12月7日 2008月11月現在、IE7の世界におけるシェアは47.39％を占めています。 （Net Applicationsより） 確実にIE6→IE7への移行は進んでいますが、まだまだIE6は無視できないのが現状です。 色々な方が透過pngをIE6でも機能させる方法をご紹介されていますが、実はjQueryのプラグインを使用する事で、あっさりIE6にも透過pngを対応させることができます。 「IE7.jsで対応」「iepngfix.js」といった方法もあるにはありますが、前者はちょっと反則的な気がしますし、後者は余計なソースがどんどん増えますし、マニアックなバグの調整作業をしなければならないのが難点です。 jQueryであれば、きちんとブラウザがサポートされているので安心ですし、余計なコードも増えません。（2～3行ほど
IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog :: Diary
最近の更新履歴 2011-12-07 Ver 1.3.2 リリース jQuery 1.7.1に対応しました。 2010-12-27 Ver 1.3.1 リリース fixed 要素がブラウザ表示エリアから隠れ１度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具合を修正しました。 2010-11-14 Ver 1.3.0 リリースしました。exAPI ベースの実装に変更しました。サイズに auto を指定できるように変更しました。 2009-12-08 Ver 1.2.2 リリースしました。IE6 にて fixed 対象要素を非表示にしても表示されてしまう不具合を修正しました。Ver 1.2.1 でサイズを明示せずプラグインを実行すると fixed されない不具合を修正しました。 more jQuery exFixed を使用すると、IE6 で p
jquery.pngFix.js で画像のサイズが大きくなるバグの解決方法 | ウェブル
Category: jQuery Date: 2010-3-30 (火) 12:02:34 jquery.pngFix.js で以下のようにしてたら、突然画像が大きくなってボヤけてしまいました。 <script type="text/javascript" src="js/jquery.pngfix.js" charset="utf-8"></script> <script type="text/javascript"> $(function($) { $("h3 > img").pngfix(); }); </script> <h3><img src="images.png" width="66" height="18" /></h3>
IE6でも背景やらimgで透過PNG画像を使えるようにする。 - Webデザイナーの為の情報Blog「CSSMAKER」
PNGとは？ 画像にはビットマップ、JPEG、GIF、PNGとフォーマットがいくつかあります。 その中でPNGはJPEG、GIFに代わってウェブ上で使われる事を目的として開発された画像フォーマットです。 PNGはかつてGIFで特許問題が起こった際に、GIF形式のフリーな代替フォーマットとして開発されました。 その為GIFによく似てます。 以下にJPEG、GIF、PNGを特徴分けにしてみました。 写真や、写真的なグラデの多い画像の圧縮はJPEGに分があります。PNGだとファイル容量がおおきくなりがち。 GIFとPNGは似ているがPNGはアニメーションが出来ない。 GIF、PNG共に透過画像をつくる事が出来るが、PNGのみアルファチャンネルをつかって半透明の画像をつくる事が出来る。 PNGを上手に使うと文字以外の部分が綺麗に透過しているロゴ画像や、半透明で背景をすかしたコンテンツ背景など
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://depthcode.com/2011/02/header-fixed.html
jQuery.belatedPNGをアップデートしました。 | プログラマ気分
IEでpngを使った際に起きる不具合を防ぐプラグイン
IE6,IE7エラー「識別子、文字列または数がありません」
flashcast：フリーで働くITエンジニア集団のブログ: thickboxをHTTPSで利用するとIE6でセキュリティの警告が出る