当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/6634b113720d039da12861bee5e480bdc914e999/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
最近、このブログにも登場！ウィンドウ下部から離れたくないフッター。 そんな愛嬌いっぱいのフッターを作る方法を紹介します。 CSSはこう html,body { height:100%; } html { overflow-y:scroll; } div#footer { position:fixed; bottom:0; width:100%; } /* IE6 */ * html, * html body { overflow-y:hidden; } * html div#main { height:100%; overflow-y:scroll; } * html div#footer { position:absolute; bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1); } IE6対策としてハッ
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 | CREAMUで紹介されていたNew CSS Sticky Footer – 2009がなかなか便利そうだったので、どんなテクニックを用いているのか調べてみました。 HTMLタグはたとえば次のような構造です。 ↑ #mainを#wrapで包み、#wrapと#footerが同階層にあります。 これにCSSを適用すると、次のようなレイアウトになるようです。 ↑ #mainの下部にpaddingをフッターの高さと同じだけ確保し、同じ値で#footerの上部にネガティブマージンをとっているようです。 ページの最下部にフッターを固定する方法はいくつかあると思いますし、自分でも試行錯誤してやっていますが、一つ便利な方法を知っておくと役立つかと思います。 clearfixなど、完全なCSSとサンプルはNew CSS Stic
このblogの下部に表示されているフッターのように、上下に完全に固定された100%のフッター(ヘッダー)をCSSだけで実現する方法。 Fixed Header & Footer Layout: A Beginner’s Guide | Noobcube [CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート 全てのブラウザで同じように固定させるのはなかなかに骨の折れる作業です。 上記の参照元を含め色々なところで固定ヘッダーのテクニックが紹介されてます。が、多くの場合ブラウザによってカクつきが出たり変なスペースが空いてしまっていたりスクロールが隠れてしまっていたりと、何かしら問題があってですね。 色々試した上で一番問題のない、ほぼ完全にクロスブラウザ仕様の実装方法がこれ。 position: fixedでひとまず固定 まず、モダンブラウザ(Firefox、IE7以降、
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
IEでposition:fixedを再現するFixed positioning Fixed positioningはIEで固定配置つまり、position:fixedが利用可能になるjsライブラリです。 IEの6以下のバージョンにはposition:fixedが正常に動作しないというバグがありますが、それを解決するのがこのFixed positioningです。 設置方法 head要素内などで、ダウンロードしたfixed.jsを読み込みます。 <script type="text/javascript" src="fixed.js"></script> これだけでposition:fixedが正常に動作するようになります。 サンプル 関連エントリー テーブルをソートできるようにするjsライブラリ-table sorting 画像に鏡面効果を与えるreflection.js 半角ｶﾅを全角カ
最近の更新履歴 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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
