Hatena::ブログ(Diary)

Cyokodog :: Diary

こちらのブログは更新を停止しております。最新の記事は以下ブログをご覧ください。
www.cyokodog.net

March 23, 2009

IE6 position:fixed の諸問題を解決する jQuery.exFixed.js

最近の更新履歴

2011-12-07
Ver 1.3.2 リリース
jQuery 1.7.1に対応しました。
2010-12-27
Ver 1.3.1 リリース
fixed 要素がブラウザ表示エリアから隠れ1度非表示状態になると、ウィンドウをリサイズし表示エリア内におさめても非表示状態が続いてしまう不具合を修正しました。
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 で position : fixed をしようとした時に発生するさまざまな問題を解決することができます。以下 Demo を IE6 で確認してみてください。上下左右に配置した要素が固定表示されてることが確認できます。

Demo

固定表示した要素を動的にリサイズしたり、表示位置を変更することもできます。

Demo jQuery exFixed を動的な位置移動やリサイズ処理に対応させてみた - Cyokodog::Diary

position : fixed 自体の拡張として、水平、垂直のどちらか一方の方向にのみ固定表示を適用することもできます。(IE6 以外にも対応)

Demo jQuery.exFixed.js を機能拡張しました - Cyokodog::Diary

IE6 における position:fixed の諸問題とは

IE6 で position:fixed を実現し、より汎用性を持たせようとすると以下のような問題にぶつかります。

  • right , bottom ベースの位置指定の対応
  • スクロール時の fixed 要素のガタつき
  • パーセント(%) によるサイズ・位置指定の対応
right , bottom ベースの位置指定の対応

JavaScript で position:fixed を実現させる方法として、スクロール量を absolute 要素の現在位置に加算する方法があります。(cssで実現する場合は IE の独自機能 expression を使用します)

var box=$j('div.box').css({'position':'absolute','top':0,'left':0})
$j(window).scroll(function(){
    box.css({
       'top',$j(document).scrollTop()),
       'left',$j(document).scrollLeft())
    });
})

Demo

但しスクロール量は left,top ベースになるので、right,bottom ベースの位置指定に対応させるためには、ウィンドウのリサイズ時に配置位置の調整が必要になります。

Demo

関連記事

スクロール時の fixed 要素のガタつき

上記のサンプルページで画面をスクロールすると fixed 要素がガタついて表示されてしまいます。後方互換モードだとこの現象を軽減させる方法があるようです。

この問題を CSS の定義のみで解決する手段として下記のような方法があります。

html,body{   
    width :100%;
    height:100%;   
    overflow:auto;   
    margin:0;   
    padding:0;   
}   
div#samp{   
    position: fixed!important;   
    position: absolute;   
}

absolute 要素のコンテナを html 要素のままに body 要素のスクロールバーのみをフロントに表示させることで absolute 要素の位置固定を実現してます...が、いろいろと問題を含んでます。

  • absolute 要素に width:100% や right,bottom ベースの位置指定をすると、absolute 要素がスクロールバーに重なって表示される
  • body 要素が html 要素に完全に重なるかたちになるので html 要素 body 要素を個別にデザインできない
  • 全ての absolute , relative 要素が固定表示されてしまう(relative要素の固定表示は IEバグ)

Demo

でこれらを解決してガタつきも抑える方法として試したのがこちら

Demo

div 要素を2つ使い擬似的に html 要素と body 要素を作り、fixed 要素の表示位置を調整してます...が、かなり大胆な手法なのでデザインによってはレイアウトがくずれんじゃないか...と少々心配な面もあります...

パーセント(%) によるサイズ・位置指定の対応

position:fixed の用途として、ヘッダやフッタの固定表示というのはありがちかと思われますが、この場合 width は 100% を指定することになるかと思います。

通常 body 要素のデフォルトには margin が付いてますが、ヘッダ・フッタの fixed(absolute)要素に対し width:100% とすると、この margin の効いた body 要素を基準にサイズ調整されるので、結果 margin 分短いヘッダやフッタになってしまいます。

また、反対にコンテンツの横幅が大きく body 要素を膨張させてる場合、今度はヘッダ・フッタの幅が長くなってしまいます。

ですので正確に position:fixed を再現するなら fixed(absolute) 要素のサイズや位置にパーセント(%)が含まれてた場合は、ブラウザの表示領域(clientWidth / clientHeight)に対しての比率でサイズ・位置調整を行う必要があります。

以下のライブラリではスクロール時のガタ付きを除けば、上記の問題を全て解決してるようです。

jQuery などのコアライブラリ非依存で実装されてるところがすばらしいです。

jQuery exFixed

まえふりが長くなりましたが、jQuery exFixed では、スクロール時のガタつきも含めて前述の全ての問題について解決しています。

互換 / 標準両モードにも対応しています。

下記ブラウザで動作確認してあります。

デモによる比較

パーセント指定をふんだんに使ったデモで各手法の実行結果を比較してみます。

上下にヘッダ・フッタ、左右にサイドバー、真ん中に正方形のボックス要素という構成で配置しています。

exFixed

Demo(標準) Demo(互換)

Fixed positioning

Demo(標準) Demo(互換)

html,body の height:100%

Demo(標準)

div による 擬似 html,body

Demo(標準)

exFixed.js と Fixed positioning のみ正しく表示されてることが確認できます。

また、exFixed.js の場合、標準 / 互換 両モードでスクロール時にガタつきが発生してない事も確認できます。

IE7 で Fixed positioning のサンプルページを見ると bottom 指定の fixed が効いてないことが確認できます。Fixed positioning の読み込みを行わないと正常に表示されるので Fixed positioning を使用する場合は IE6 の場合のみ読み込むようにした方が良いです。

使い方

jquery.jsjquery.exfixed.js を読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.exfixed.js"></script>

下記のように fixed の CSS 定義をし、対象要素に対し exFixed() メソッドを実行します。

<style>
    #sample{
        position:fixed;
        width:40%;
        height:40%;
        right:10%;
        bottom:10%;
    }
</style>
<script>
    $(function(){
        $('#sample').exFixed(); // for IE6
    });
</script>

ダウンロード

こちらからどうぞ

動作原理

基本的に expression を使ったスクロール量に合わせた位置移動で position: fixed を実現しています。

element.style.setExpression(
    'top',
    '(baseTop+(document.body.scrollTop||document.documentElement.scrollTop))+"px"'
);

これだけだとスクロール時、対象要素がガタつくので以下のような記述で解消します。

$('html').css({
    'background-image':'url(image)',
    'background-attachment':'fixed'
});

background-attachment を fixed にして、background-image を指定もしくは url(null) とするとガタつかなくなります!

CSS Lecture さんのこちらの記事をきっかけに知ることができました。(ありがとうございました)

ちなみ後方互換モードの場合は body 要素に対し同様の処理をすることでガタつきを解消できます。(背景画像の移動はできませんが...)

最後に

IE8 がリリースされたばかりで IE6 ネタというのもあれですが、私のように社内イントラシステムをメインに仕事をされてる方はなかなか IE6 とは手を切れないのではないでしょうか。

今までは IE6 が足枷になって fixed 自体が存在しないも同然でしたが、ガタつきの解消とパーセント(%) 指定の対応で本来の fixed とほぼ同等の再現性を実現できたかなと思うので、使える場面があれば使っていこうかと思います。

更新履歴

2009-11-29
Ver 1.2.1 リリースしました。IE6 にて fixed 対象要素のサイズを指定してない状態で、ウィンドウをリサイズし、対象要素の一部が表示領域外にはみ出すと、その部分が欠けた状態のままになってしまう問題を修正しました。
2009-11-11
ご要望があったので圧縮版の JS ファイルもダウンロードできるようにしました。(Ver 1.2.0 / 11KB → 7KB)
2009-10-02
機能拡張と不具合修正をしました(Ver 1.2.0)。詳細は以下をご覧ください。
2009-09-03
スクロール時のガタつき防止処理を変更しました(Ver 1.1.2)。詳細は以下をご覧ください。
2009-08-23
標準・互換モードの判定タイミングに問題ありIE8でただしく動作しないケースがあり、ソースを修正しました(Ver 1.1.1
2009-08-22
background-attachment:fixedの強制設定による背景画像の固定化を防止するために html 要素の背景画像を body 要素に割り当てなおすおせっかい機能がありましたが廃止しました
2009-05-15
fixed 要素を動的にリサイズ、位置移動できるようにしました。詳しくはこちら。

nicnic 2009/04/13 12:02 はじめまして。
exFixed.js 利用させて頂いております。
とても便利なプラグインを公開して頂きましてありがとうございます。
一点、typo がありましたのでご報告させて頂きます。

exFiexd.js の6行目が

target.css('postion','fixed');

となっておりますが、こちらは

target.css('position','fixed');

ではないでしょうか。
その他の点に関しては問題なく動作しております。

cyokodogcyokodog 2009/04/13 13:15 ご報告ありがとうございます。
このソースだと「IE6 以外のブラウザで、CSS に fixed 指定してない状態で、exFixed()としても fixed されない」という事になってしまいますね><
ソースファイルとエントリ本文を修正しました。
また何かありましたらよろしくお願いしますm(_ _)m

たまたま 2009/04/16 17:32 始めまして。 とても有用なプラグインを公開していただきありがとうございます。

固定ヘッダーやフッターは、利用すると便利だなと思いながらもIE6の諸問題で苦慮していたので大変助かります。

筋違いかもしれませんが
ひとつ、質問があるのですが、組み込んでみたのですが、どうやっても「fixedメソッドがない」とエラーになってしまいます。(IE,firefoxともに)


1.metaタグにてjquery1.3.2-min.jsを組み込み後にexfixed.jsを読み込み
2.position:fixed;を指定しているcssは、linkタグによる外部cssファイル読み込み
3.$(’fixedしたいID’).fixed();は、外部JSファイル内に$(document).readyを利用して記述しています。

その他としては、phpをUTF-8で使用、DTDはXHTML 1.0 Strictを利用してます。

なにか、利用方法に間違いがありますか?

手助けしていただけると助かります。
一応ソースも見てみたのですが、私のレベルでは、いまいち解読できませんでしたのでよろしくお願いします。

cyokodogcyokodog 2009/04/16 23:43 >たまさん
コメントありがとうございます。そして申し訳ございませんm(_ _)m
サンプルのメソッド名 fixed() が間違ってました。
正しくは
$(target).exFixed();
でした。

また何かありましたらよろしくお願いします。

南部新南部新 2009/05/15 23:17 こちらでは初めまして。南部です。

一つ質問なのですが、fixedのCSS定義をCSSに書くことは可能なのでしょうか?
また可能な場合、どのように書けばいいか教えて頂ければ恐縮です。

cyokodogcyokodog 2009/05/16 02:30 可能です。
ブログのソースの方拝見させて頂きました。
下記のように書けばOKかと

<style>
.fixedHeader{
position:fixed;
top:0px;
right:0px;
width:100%;
}
</style>
<script>
jQuery(function($){
$('div.fixedHeader').exFixed();
});
</script>
</head>
<body>
<div class="fixedHeader">
<table border="0" style="width: 100%; ....

ヘッダ部分のソースを同じにしたサンプルを作ってみました。
http://cyokodog.web.fc2.com/cyokolab/example03/exfixed_bulletsongs.html

IE6,7 ,Firefox3 で正しく動作することを確認しました。

mofumofu 2009/07/18 13:33 はじめまして。

このスクリプトを試してみたら、IE6でもがたつくことなく、きれいに固定できて感激しました。

ただ、ステイタスバーに
「△! ページでエラーが発生しました。」
と表示されてしまいます。

再現環境ですが、
exFixed 2.0.2.js ファイル内の、(function($j)直前に
$(function(){
$('#mofu').exFixed(); // for IE6
});
を記述し、ロード用のjsファイルでexFixed 2.0.2.jsを呼び出しています。

他に、jQueryベースのライブラリがいくつかと、独立系のJSをいくつか使用していますが、exFixed 2.0.2.jsを適用外にするとエラーメッセージは表示されません。

なにか、バッティングしているのか、自分の記述がまちがっているのでしょうか。(ちなみにjQuery勉強3日目...)

動作はするので問題ないのかもしれませんが、エラーメッセージが表示されてしまうと、ユーザー的には困惑するかと思い、質問してみました。

cyokodogcyokodog 2009/07/22 19:14 返信遅くなりましてすいません。
記述の仕方については、exfixed.jsの中身を書き換えてる(?)との事ですが、一般的にはプラグインファイルの書き換えはせず下記のような記述をするかと思われます。

<script src="jquery.js"></script>
<script src="exfixed.js"></script>
<script>
jQuery(function(){
$('.fixed').exFixed();
});
</script>

ただソースそのものを変更してる訳ではないので、exfixed を使用する上では問題無いかと思います。
ですので他のライブラリと競合してるかもしれませんね。(他のライブラリの処理は正常に行われてますでしょうか?)

下記のような記述で試してみてはどうでしょうか。noConflictメソッドで
$ショートカットが競合しないようにし、$jでjQueryセレクタが使用できるようにしてます。

<script src="jquery.js"></script>
<script src="exfixed.js"></script>
<script src="library_a.js"></script>
<script src="library_b.js"></script>
<script>
jQuery.noConflict()(function($j){
$j('.fixed').exFixed();

その他処理を記述
});

mofumofu 2009/07/23 21:25 ご回答ありがとうございます。
私が利用している方法は、

1.
HTMLのヘッダにCSSでいうところのインポート用ファイルを記述
例:<script type="text/javascript" src="import.js"></script>

2.
import.jsには、
with( document ){
write('<script type="text/javascript" src="teketeke.js"></script>');
write('<script type="text/javascript" src="pekepeke.js"></script>');
write('<script type="text/javascript" src="mekemeke.js"></script>');
}
と、利用したいJSを書く。

なぜかというと、試験的にライブラリの増減があるので、そのたびにすべてのHTMLのヘッダを修正するのが大変だからです。それと、ヘッダの記述量を軽量化したいためです。
ただ、writeはあまりスマートな記述方法ではないようなので、もっとよいインポート方法を探しているところです。

3.
利用したいライブラリの量が多いので、ヘッダに
<script>
jQuery(function(){
$('.fixed').exFixed();
});
</script>
というように書いていくのが面倒なので、これも外部ファイル化してしまっていました。記述場所が分散するとわかりにくいので、該当プラグインの直前に書いていました。

また、プラグインによっては、対象要素に手動でクラスを付与して動作させるものがありますよね?
自分以外の人がHTMLを編集する時に、そうしたクラスの付与を意識しなくてもすむように、

jQuery(function(){
$('#mofu').addClass('nyao').plugIn();
});

というようにメソッド挿入したりすることがあります。

自分はjQueryの初心者なので、こうした改ざん(!?)がスクリプト上、好ましくないのかよくわからずにやってしまいました。

JSの軽量化を調べところでは、プラグインなどを圧縮して一つにまとめたほうが動作が軽くなる、というので、そこを目指しているのですが・・・。IEの動作がとにかく重いので(なぜならほとんどのプラグインが、IEのCSS補完機能の類なので..)、その重さを少しでも解消したいのです。

それと、教わったnoConflictメソッドを追加してみたら、他のプラグインも含めて動作がおかしくなってしまい、せっかくのアドバイスが生かせませんでした。ひゃぁ。
(ノ_-。)ウゥ...


でも、固定機能自体は、すこぶる快調です!
他のJSも試してみたりしましたが、上下にぐわんぐわんなってしまったりして、実用レベルとはいえませんでした。
Cyokodog様のサイトが、もう少し「position fixed」などのキーワードで上位検索されるようになると、世の中に救われる人が増えると思います。
私はexFixed.jsを見つけられて、幸運でした。
長くなってすみません。

cyokodogcyokodog 2009/07/24 01:39 ありがたいお言葉ありがとうございます。
競合エラー(? document.writeによるimportは想定してないのでexfixedの問題かもしれません)の方はお役に立てなくてすいません。

>教わったnoConflictメソッドを追加してみたら、他のプラグインも含めて動作がおかしくなってしまい.....
他のjQueryプラグインも併用してるということですかね。だとすると少々書き方を変えないと確かに動かなくなるかもしれません。
JSファイルの軽量化を気にされてるようなので、インターネットで公開されてるhtmlなのかな?もし良ければURLを教えて頂ければ原因を調べてみますがどうでしょう(解決できるかはわかりませんが...)

>ただ、writeはあまりスマートな記述方法ではないようなので、もっとよいインポート方法を探しているところです。
これについては以下の記事が参考になるかと思います。

動的スクリプトローディング(さんざん既出だと思うけど - IT戦記
http://d.hatena.ne.jp/amachang/20071116/1195202294

動的なscriptタグの読み込みを同期的に行う - Blog.37to.net
http://blog.37to.net/2008/08/script/

mofumofu 2009/07/25 16:43 chokodog様、
JSの外部ファイルロードについて有益なサイト情報ありがとうございます!
「動的 ロード」などで検索するとヒットできたのですね。

じっくり読んでみましたが、みなさんの知識を集結しても、クロスブラウザでの根本的解決法は難しいようですね・・・。

JSで、もともとそういうシステムが用意されていないということは、
実装に制限があるからなのでしょうね。

やっぱりDreamweaverとかでテンプレート機能を利用するしかないのかなぁ、と思いました。

bosuketebosukete 2009/08/21 21:20 cyokodogお世話になります。

ぶれのないexFixed.js、動作が非常にスムーズで感動しております。
是非導入したいのですが、なぜかIE6で見た場合、bodyタグの背景だけ適用されません。
(他の背景は適用されます)
製作物は
http://figaro-web.com/eggbrain/
こちらなのですが、他にjQueryを使用している部分はありません。
他にscriptはsmoothscroll.jsを使用しています。
bodyの背景をfixedにしておりますが、除去しても同じ結果になります。
エンコードはUTF-8、DTDはXHTML 1.0 Strictです。

初歩的なミスかもしれませんが、よろしければご教授ください。
よろしくお願いいたします。

cyokodogcyokodog 2009/08/22 01:59 コメントありがとうございます。調べたところロジックに問題がありました。
exFIxed を使用すると IE6ではbackground-attachment:fixedが強制的に設定されるのですが、意図しない背景画像の固定表示を防止するため、
html要素の背景画像をbody要素に割り当てなおす機能がありました。この処理がうまく動いてなかったようです。今回のこのおせっかい置換機能を廃止しましたので、最新のソースを再度ダウンロードしお試しいただけますでしょうか。
よろしくお願い致します。

bosuketebosukete 2009/08/22 10:44 マーベラス!
早速の対応ありがとうございます!
おかげでIE6でも完璧に動作いたしました。感動です。
ただ、IE8では以下のような

Web ページ エラーの詳細

ユーザー エージェント: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
タイムスタンプ: Sat, 22 Aug 2009 01:23:29 UTC
メッセージ: 実装されていません

ライン: 257
文字: 5
コード: 0
URI: file:///D:/website/eggbrain/js/jquery.exfixed.js

エラーが吐かれて互換表示でないと機能しません・・・。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
IE7表示させるメタタグで一応解決しますが、マイクロソフトへの怒りでInternetExplorer一揆を起こしそうです。

あと以前の投稿では、cyokodog様に敬称を付け忘れた非常に失礼な文章になっている事を平にお許しください。

cyokodogcyokodog 2009/08/23 02:57 >敬称を付け忘れ...
自分もよくやります(^^)

フィードバックありがとうございます。エラーの件調べてみました。
画面のロードを待たずに$.boxModelを参照してたのがまずかったようです。(undefinedになる)
修正しましたので、お手数ですが再度最新ソースをダウンロードしお試しいただけますでしょうか。
よろしくお願いします。

bosuketebosukete 2009/08/24 10:09 対応ありがとうございます!
IE8でもばっちり動作しました!
これまでスムーズスクロールのガタツキやデザインに苦しめられていたのが嘘のようです!
これからも利用させてください!
本当にありがとうございました!

bosuketebosukete 2009/08/29 22:52 cyokodog様
何度も投稿申し訳ありません。
fixedの定義は、「親要素から絶対的に配置/位置は固定」とのことですが、
exFIxedは親要素に対して絶対配置になるのでしょうか?

たとえば

<div id="wrappar">
<div id="fix">フィックスしたい部分</div>
</div>

#wrappar {
width: 800px;
margin-right: auto;
margin-left: auto;
}

のような形で、wrappar要素をセンタリングした場合、fix要素はそのwrapparの中からの絶対配置に出来るのでしょうか?
ちょっと自分の製作サイトでは画面の左上からの配置しか再現できなかったもので。

お手すきのときにでもご教授願えますでしょうか?

cyokodogcyokodog 2009/08/30 00:27 こちらのサイトで説明されてる fixed の定義をみると

http://www.dspt.net/stylesheet_css/005/007.html

「position:fixedとすると、ボックスは固定されます。このときの基準点は、他のボックスの影響を受けることなく、ブラウザの表示画面の左上が基準となります」

と説明されてます。
Firefoxなどのブラウザで試すと分かりますが、fixed を指定すると親(先祖)要素の存在に影響されず、left やtop
の値はブラウザの表示領域に対しての座標指定として配置されることが確認できます。(ちなみに基準位置はbottomを指定すれば下、rightを指定すれば右端になります)
ですの exFixed でもこれと同様にブラウザの表示領域が基準位置になり、特定の親(あるいは先祖)要素を基準とした配置指定はできないようになっています。
(…が、結構これをしたいというケースもあるかなとも思っており、必要にせまられたら実装してみようかなとも思っています。実装案はあるので..)

bosuketebosukete 2009/08/30 20:06 勉強になります!
なるほど、やはりブラウザの左上基準なのですね。
もし・・・可能でしたら・・・是非ともっ・・・実装していただけたらうれしいです!
(今でも十分うれしいですが!)

質問にお答えいただき、ありがとうございました!
これからもブログ、読ませていただきます!
拙サイトでもexfixed紹介させてください!

cyokodogcyokodog 2009/09/04 02:01 bosukete さん
親要素の位置を基準とした fixed 要素の位置指定の件のついて教えてください。

<div id="wrapper">
<div id="fix">フィックスしたい部分</div>
</div>
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}

この状態で
1.#fix を top:0 , left:0 とした場合、#fix は #wrapper と同じ位置に表示される?
2.ブラウザウィンドウをリサイズし #wrapper の left 位置が変化した場合、#fix のleft 位置もこれに追従させる?
3.縦方向にページをスクロールさせた場合、#wrapper が上方にスクロールアウトしてきますが、この場合は #fix の top 位置は固定されたまま?
といった感じでしょうか?

下記にサンプルを作りましたのでご確認頂けますでしょうか。
http://cyokodog.appspot.com/lab/lab/ie6fixed/exfixed02a.html

bosuketebosukete 2009/09/06 12:41 cyokodog様

まさにこれです!素晴らしいです!勝手な要望にもかかわらず・・・申し訳ありません。
サイト製作を頼まれる折、「センター寄せにして欲しい」と言われることが多々ありまして、左側固定メニュー(fixedのボックスがメニュー)でのセンター寄せサイトを作るのに行き詰っておりました。
(表現下手で申し訳ありません)

ちなみに現在のexfixedですが、fixedのボックスの縦サイズがウインドウサイズを超えると、永遠スクロールが起きます。これはheightを100%に指定することで回避できるようです。
既知ならすみません。

cyokodogcyokodog 2009/09/07 00:52 親要素基準の配置調整の件ですが、exFixed自体のソースを変更しなくても実現できます。
実装方法については近い内に書こうと思いますが、ただexFixed へのパラメータ指定等で実現できたほうが使う側は楽かと思うので、そちらも検討したいと思います。
ウィンドウサイズ超え時の永久スクロール、動作確認しました。ご報告ありがとうございます。こちらの修正も検討したいと思います。
また何かありましたらよろしくお願いします。

bosuketebosukete 2009/09/09 11:06 >>パラメーター指定
可能になれば非常にありがたいです!
あつかましいようですが、期待しております!

bosuketebosukete 2009/09/17 22:39 お疲れ様です。
早速サンプル使用させていただきました。うれしい・・・。
一つ気になる事象があったので投稿させていただきます。
親要素からスタートするfixedのサンプルを↑で頂きましたが、こちらfirefox3の場合、ある程度まで下にスクロールさせた後、F5キーで再読み込みをすると、fixedの要素が消えてしまいます。
IE6ではF5を押した後もきちんと描写されるようです。

cyokodogcyokodog 2009/09/18 01:07 ご報告ありがとうございます。
実はご要望のあった、「パラメータ指定による親要素基準の配置」機能を実装をしておりましてほぼできあがったところです。
ロジック全体を刷新しましたので、永久スクロールの不具合や、ご指摘のF5更新による要素の非表示の件も解決されています。
クロスブラウザベースの細かな検証がまだ終わってませんが、お急ぎでしたら下記サンプルをご使用/ご確認ください。

http://cyokodog.appspot.com/lab/lab/ie6fixed/exfixed06a.html
http://cyokodog.appspot.com/lab/lab/ie6fixed/jquery.exfixed05f.js

パラメータの指定は、baseNodeに配置の基準となる要素を指定し、fixedX を false とすると X 方向には 固定表示されないようになります。
詳しくは準備ができたら記事にいたします。

bosuketebosukete 2009/09/20 11:26 なんだか急がせてしまったようで申し訳ありません。
早速使わせていただきました、現在不具合は出ていません。
ありがとうございます!
記事のほうも期待しております。

bosuketebosukete 2009/09/22 19:30 お疲れ様です。
F5更新の要素非表示はバッチリなのですが、やはりIE6での永久スクロールが起きてしまいます。
上で公開していただいたリンク(かわいらしいお子様ですね)ページをIE6で、ウインドウを縮小して要素にかかると、永久スクロールしてしまいます・・・。

cyokodogcyokodog 2009/09/25 01:10 ご報告ありがとうございます。
要素の内包物が隠れた場合と要素自体が完全に隠れた場合に発生するようですね。

只今、position:fixed をサポートしてるブラウザで fixedX:false
とした場合の横スクロールのガタつきを改善する実装をしてまして、ご報告いただいた不具合についても合わせて対応いたします。以下は細かなテストが終わってない作成中のものですがガタつき、永久スクロールともに解決できてるかと思います。

http://cyokodog.appspot.com/lab/lab/ie6fixed/exfixed06b.html

cyokodogcyokodog 2009/09/26 00:17 すいません。先のサンプルだとブラウザをリサイズして1度でも要素全体が隠れると、要素がずっと非表示状態になってしまいますね。
只今細かな部分を修正してますので今しばらくおまちください。

cyokodogcyokodog 2009/10/02 01:57 お待たせしました。(まだあるかもしれませんが)とりあえず不具合修正完了しました。
新機能の使い方など記事にしましたので、よろしければ見てやってください。
http://d.hatena.ne.jp/cyokodog/20091001/jquery_ex_fixed04

mofumofu 2009/11/08 20:15 バージョンアップされたようなので、ダウンロードしにきました。
cyokodogさまにひとつお願いがあるのですが、min(圧縮)版のコードも
置いていただけませんでしょうか。

http://compressor.ebiene.de/
などの圧縮ツールを使うと、必要な箇所まで削除されてしまうのか、
動作しなくなります。

ファイルサイズを小さくして、パフォーマンスを少しでも向上させたく、
どうかよろしくお願いいたします。

inline-blockのファイルも...(人・∀・))オネガイシマス

cyokodogcyokodog 2009/11/11 00:56 exFixed.js , exInlineBlock.js の min(圧縮)版用意しました。以下ページからダウンロードできます。

http://d.hatena.ne.jp/cyokodog/20090323/jQueryExFixed
http://d.hatena.ne.jp/cyokodog/20090906/jQueryExInlineBlock01

ちなみに圧縮は YUI Compressor Online で行いました。
http://yui.2clics.net/

また何かありましたらご遠慮なく言ってください

mofumofu 2009/11/12 13:50 cyokodogさま

圧縮版ありがとうございます。
YUI Compressor Onlineだとうまく圧縮できるのですね。
これからは、それも利用してみます。

圧縮はYUI Comp...φ(..)

lowlow 2009/11/17 11:16 cyokodog様

はじめまして。
とても便利で使い易いのでこれから使わせていただきたいと思っています。
ありがとうございます。

一点お教えいただきたいのですが、
背景画像をfixedさせたいと思っていますが
exfixedで対応されていますでしょうか?

色々試したのですがIE6でうまく固定が出来ません。
背景画像以外の固定は出来ているのですが
背景画像の時は何か別途記述が必要になりますでしょうか?

下記にソースを書かせていただきます。
申し訳ありませんが宜しくお願いいたします。


HTML内記述
<body id="bgimage">
</body>

<script>
$(function(){
$('#bgimage').exFixed(); // for IE6
});
</script>


外部CSS記述
#bgimage { background:url(../../images/bg.gif) no-repeat center top fixed; }

又は
#bgtokyo {
background-image:url(../../images/bg.gif);
background-attachment:fixed;
background-position:center top;
background-repeat:no-repeat;
}
としても同じでした。


宜しくお願いいたします。

cyokodogcyokodog 2009/11/17 23:42 以下のように html 要素に対し画像を割り当てるとうまくいくと思います。

html { background:url(../../images/bg.gif) no-repeat center top fixed; }

バージョンアップの過程でこの辺の処理を変えてますので、念のため最新版(1.2.0)をお使いください。背景画像の固定については以下のエントリでふれてますのでご参考までに

http://d.hatena.ne.jp/cyokodog/20090902/jQueryExFixed03

lowlow 2009/11/18 01:22 ご返信ありがとうございます。
試させていただきます。

dongurimushidongurimushi 2009/11/25 22:23 こんにちは。
テストしてみましたが、動きもスムーズですばらしいですね!!

是非使用したいのですが、ライセンスはどのようになっていますか?
宜しく願いします!

cyokodogcyokodog 2009/11/25 23:56 jQuery と同じく MIT & GPL のデュアルライセンスということでお願いします。

ninanina 2009/12/05 00:04 はじめまして。

とても便利だと思い使ってみたのですが、
jQuery UI の Hide と Show を併用すると Fixed されなくなってしまいました(T-T
具体的には次のソースになります。

$(function() {

$('#test').exFixed({
top: '100px',
left: '100px',
width:'100px',
height:'100px',
opacity:.5
});

$('#show').click(function(){
$('#test').show('blind');
});

$('#hide').click(function(){
$('#test').hide('blind');
});

});

<div id="test" style="background:#0f0;">test</div>
<input type="button" value="show" id="show" />
<input type="button" value="hide" id="hide" />

IE6以上, Firefox, Opera, Chrome で試しましたが、
IE6 だけが正しく動作しませんでした。
画面を表示した直後は正しく Fixed されるのですが、
hide で非表示にして show で再表示すると Fixed されなくなります。
これを正しく動作させるのは難しいでしょうか?
宜しくお願いします。

cyokodogcyokodog 2009/12/05 12:19 nina さん

コメントありがとうございます。
以下の記述で動作するかと思います。

var api = $('#target').css('opacity',.5).exFixed({
top: 100,
left: 100,
width: 100,
height: 100
}).getExFixed();

$('#show').click(function(){
api.fixedOpen(function(){
api.target().show('blind',function(){
api.fixedClose();
});
})
});
$('#hide').click(function(){
api.fixedOpen(function(){
api.target().hide('blind',function(){
api.fixedClose();
//animate 完了後再表示されてしまうので、hide()する(たぶんバグ)
api.target().hide();
});
})
});

サンプル
http://cyokodog.appspot.com/lab/QA/exfixed/exfixedQA02a.html

詳しくはこちらのエントリをご覧ください
http://d.hatena.ne.jp/cyokodog/20090514/jQueryExFixed02

ninanina 2009/12/07 09:37 cyokodog さん。
ご回答ありがとうございます!
動作確認しました。
show, hide が動作している最中にスクロールすると、
その間 Fixed がきかなくなりますが、それ以外は
正しく動作しています。
ありがとうございます(^-^

cyokodogcyokodog 2009/12/08 00:41 残念ですが IE6 の場合 animate 処理中にスクロールした場合は固定表示されません。(animateが完了した時点で本来の位置に配置補正されます)

animate 完了時、対象要素が強制的に表示されてしまうのはバグでしたので修正致しました
よろしければ最新版(1.2.2)の方をご使用ください( 前述のapi.target().hide(); の記述が不要になります )

コメントを頂けたおかげでバグを発見することができました。
ありがとうございました。また何かありましたらよろしくお願いします。

ninanina 2009/12/10 10:43 cyokodog さん、こんにちは。

バグ修正ありがとうございます。
さっそく最新版を試してみます。

haruriharuri 2010/08/11 10:59 はじめまして。
ヘッダー固定のサイトをガタつきなく作りたくて探していたところ貴サイトへ辿り着きました。
セッティングが簡単でクロスブラウザ対応で…泣きたくなるほど感謝しています。
ありがとうございます!

ところで一点質問なんですが、
fixさせる要素(私の場合はヘッダー)の高さを指定せず、テキスト量が増えたりや文字サイズが大きくなってヘッダーの高さが広がった場合、次に続く要素(私の場合はコンテンツ)の開始位置も合わせて下がるということは可能でしょうか?

<div id="wrapper">
<div id="header">ヘッダー。fixされています。</div>
<div id="contents">メインコンテンツ。開始位置はヘッダーの下からです。</div>
</div>

と書いています。
javascriptで#headerの高さを取得して、#contentsのpadding-topに代入すればイケる…?

素人の浅知恵なので、是非ご教授ください。
よろしくお願いします。

たこぱちたこぱち 2010/10/14 15:59 はじめまして。
素晴らしいプラグイン、ありがとうございます!感謝です!

一点質問があります。

「動的に固定したオブジェクトを、動的に固定解除する」
ことは、可能でしょうか?

特定のエリアをScrollしている場合のみ、
オブジェクトを表示&固定したいと考えております。

宜しくお願い致します。

cyokodogcyokodog 2010/11/02 07:02 回答遅くてすいません。下記エントリーで解決方法を記述してますので、ご参照ください。
http://d.hatena.ne.jp/cyokodog/20101101/exresize01

yukitiyukiti 2011/05/21 04:37 はじめまして、貴サイトを参考にjQeryを始めて利用してみている超初心者です。
ec-cubeというオープンソースのecサイトを使ってショップを作ってるんですけど。
こちらのecサイトはsmarty関数とhtmlで構成されているので私の記述が(完全にコピペ)間違っているのか
はたまた、そもそも記述している場所がちがうのか?で意図した動きになりません。

とりあえず<head>内のtplは以下のようにしてます。
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/css.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/navi.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/win_op.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/site.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.exfixed-latest.js"></script>
<script> jQuery(function($){
$('div.header').exFixed();//for IE6
});
</script>

<!-- ▼BODY部 スタート -->
<!--{include file='./site_main.tpl'}-->
<!-- ▲BODY部 エンド -->

<script> jQuery(function($){
$('div.header').exFixed();//for IE6  ←おそらくこの記述のあたりにsmarty関数が必要なんでないかと自分なりに思ってるんですけど・・・。申し訳ないです。どれもこれもホント素人なもので、貴サイトはsmartyのサイトではないのでお聞きするところがそもそも間違っているのかもしれません(涙)
});
</script>

ちなみに#headerは

div#header {
width: 180px;
height: 100%;
float: left;
position: fixed;
top: 0px;
z-index: 5;
background-image: url(../img/header/10+.png);
background-position: right top;
background-repeat: repeat-y;

ご教授よろしくお願いします。

cyokodogcyokodog 2011/05/23 15:42 yukiti さん

コメントありがとうございます!
ソース見させていただきました。
headerはID指定されてるので、

$('#header').exFixed()

とすればうまくいくと思います。
ローカル環境で試したところうまくいきました

よろしくお願いします

yukitiyukiti 2011/05/25 14:38 cyokodog様

ありがとうございます!できました!感動です!
しかし・・新たな問題も抱えてます。javascriptでiepngfix.jsを試みたんですが、うまく効いてないようで。。
いっそ、jQeryで問題解決できるものが無いかこれから探すところであります!

素朴な疑問なんですがとっても便利そうなこのjQeryたくさん利用するとそれだけhead内が呪文だらけになってくんじゃないんですか?
これからjQeryのお勉強しようと思います!ホントありがとうございました♪またお邪魔します。

cyokodogcyokodog 2011/05/25 14:54 yukiti さん

>しかし・・新たな問題も抱えてます。javascriptでiepngfix.jsを試みたんですが、うまく効いてないようで。。

すでにご存知かもしれませんが、DD_belatedPNGはどうでしょう?
以下のような注意点がありますが、jQueryプラグイン版もあり評判も良いようですが

http://blog.mach3.jp/2011/02/png-and-opacity-on-explorer.html
http://ms19.cosmicengine.jp/lab/?p=286

yukitiyukiti 2011/05/25 16:53 cyokodog様

ありがとうございます!
上記からDD_belatedPNGを試してみることにしました。

またうまくいかなかったら質問させてください<m(__)m>
でも、分かりやすく解説してあるホームページはjQery版ではないようなんで・・・(汗)とりあえず、やってみます!素人のいいところは失敗を恐れない事ですよね〜。

yukitiyukiti 2011/05/25 17:34 <script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.exfixed-latest.js"></script>
<script> jQuery(function($){
$('#.header').exFixed();//for IE6
});
</script>

div#main_ {
margin-left: auto;
position: relative;
width: 1000px;
height: 100%;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
background-image: url(img_/bg.png);
background-repeat: repeat;
}


div#header {
width: 180px;
height: 100%;
float: left;
position: fixed;
top: 0px;
z-index: 5;
background-image: url(../img/header/10+.png);
background-position: right top;
background-repeat: repeat-y;

mainのwidhtが1000pxでその中にfloatした2つのBOXがあるのですがfloat:leftしている#headerにjQeryでie6でもfixedに成功しました。・・・が。ブラウザを最大に表示させたら当たり前なんですがブラウザのtop0地点に#hederが表示され#main_で包括できなくなってしまってます(ie6だけ) css部分でie6にだけマージン指定かposition指定してやったらいいのかとかしてみたのですが、解決しませんでした。 で#main_もfixedしてみてもだめでした。
CSSの基本的な事なんだと思うのですが。。。よろしければヒントをお願いいたします。

yukitiyukiti 2011/05/27 20:19 ie6用のcssを用意したりしてみましたが、挫折しました(苦笑い)
やはり、素人には・・というより私の脳みそでは限界がありますのでie6は切り捨ててすすむ事にしました。

でも、chokodogさんのおかげでjQeryの事が少しわかったのでこれから前向きに楽しんでつくっていこうと思います!
ありがとうございました♪

nobnob 2011/11/27 18:59 cyokodog様

初めまして。
exFixed.jsを使わせていただきました。
私のようなjQueryを全く理解していないものでも簡単にでき、すっきり固定された時には感激しました!
ほかにも便利なプラグインがあるようで、また活用させていただきたいと思います。ありがとうございました。

cyokodogcyokodog 2011/11/27 23:57 nobさん

コメントどうもです!
会社のブラウザもIE8になり、IE6ももう需要ないかなぁと思い保守もおろそかにしてましたが、お役に立てたなら幸いです。また何かありましたらコメントください

exFixedリピーターexFixedリピーター 2011/12/06 13:12 こんにちは。
以前からIE6対策でexFixed.jsを愛用しております。

さて、このたび、久しぶりにjqueryを最新版にバージョンアップしようとたところ、exFixed.jsが動作しなくなってしまいました。
具体的には、固定させたい要素をHTMLで書き込んだ位置に、そのまま表示されてしまいます(relativeと同じ)。

動作確認環境は

WinXP+IE6
jquery1.7.1

です。なお、バージョンを1.4.2に戻すと正常に動作いたします(Ajax呼び出し)。

そこで、お手数をおかけして申し訳ないのですが、
1.7.1に対応されているか、どうか教えていただけますでしょうか。
よろしくお願いいたします。

jsohjsoh 2011/12/07 12:17 html タグの上に以下を追加して見てください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

exFixedリピーターexFixedリピーター 2011/12/07 13:06 jsoh様

2011/12/07 12:17のコメントは私へのものでよろしいでしょうか?

DOCTYPE宣言はもともとstrictで入れていたのですが、一応transitionalに変更して確認してみました。
それでも、やはりバージョンを1.7.1に変えると、Fixedされなくなります。

これまでも、ローカル環境でJSのバージョンアップを試すと、他に利用しているプラグインがすぐに動作するときとしないときとがあり、不安定なことがありました(何度もリロードしないと動作しないなど)。

そういった時間差的な問題なのか、1.7.1版の仕様が1.4.2の頃と代わってしまったせいでプラグインが反応しなくなっているのか、わからない状態です。

どなたかが、すでにjquery1.7.1でexFixedを正常動作されていれば、自分の環境に原因があるとわかるのですが...。

cyokodogcyokodog 2011/12/07 14:43 exFixedリピーターさん

フィードバックありがとうございます。
原因を調べたところ、jQuery1.6.x以降で仕様変更のあった
prop/attrメソッドの影響のようでした。後程、修正版をgithubにアップ致します。

cyokodog

cyokodogcyokodog 2011/12/07 21:48 exFixedリピーター さん

最新版のexFixedをgitHubにアップしましたので、そちらでお試しください

exFixedリピーターexFixedリピーター 2011/12/08 12:34 cyokodog様

exFixed1.3.2にアップデートして、jQuery1.7.1で動作することを無事、確認いたしました!!

jQuery本体が、いろいろ仕様変更するものなのですね。
性能向上のためなのでしょうが、なるべく既存のプラグインに影響がないようにしてもらわないと、メンテナンスが大変になって最新版の利用がしにくくなりますね...。

今回は、お忙しい中、迅速に問題解決していただき、どうもありがとうございました。(^−^)

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証