画面の下からフィードバックフォームをスライド表示して固定する

ホーム > Postal Search Ajax API with jQuery > fixedUI プラグイン

WEB ブラウザの画面下に指定したブロック要素を固定して表示する jQuery プラグインです。ページをスクロールしても、指定したブロック要素を常に WEB ブラウザの画面下に表示します。

また、固定したブロック要素は表示や非表示の指示ができます。表示を指示すると、画面下からブロック要素をスライドしながら表示します。非表示を指示すると、画面下にブロック要素をスライドしながら隠します。

同じ効果のある jQuery Catfish Advert Plugin という jQuery プラグインもあるのですが、配布していたサイトが休止?していて入手できなくなっています。今後、再開してメンテナンスするのかもかわかりません。それじゃということで jQuery Catfish Advert Plugin と同じ振る舞いをするプラグインを自ら作ってみたわけです。

ダウンロード

jquery.fixedUI.js (Uncompressed only)

デモ

次のボタンをクリックすると、IBM developerWorks のようなフィードバックのフォームを WEB ブラウザの画面下に表示したり隠したりします。また、フォームの送信ボタンをクリックしても隠れます。

<script type="text/javascript">
//<![CDATA[

jQuery(function($) {

$('#show').click(function() {
  $.fixedUI('#box');
});

$('#hide').click(function() {
  $.unfixedUI();
});
  
$('#form').submit(function() {
  $.unfixedUI();
  return false;
});

}); //jQuery

//]]>
</script>

<p>
<input id="show" type="button" value="$.fixedUI" />
<input id="hide" type="button" value="$.unfixedUI" />
</p>

<div id="box" style="display:none;">
この記事についてどう思われますか？
<form id="form">
<input type="radio" name="pt" value="5" />大変素晴らしい
<input type="radio" name="pt" value="4" />良い
<input type="radio" name="pt" value="3" />まあまあ
<input type="radio" name="pt" value="2" />改善の余地あり
<input type="radio" name="pt" value="1" />不充分・不完全である<br />
<input type="submit" value="送信" />
</form>
</div>

仕組みや問題点など

WEB ブラウザの画面下へのブロック要素の固定は position: fixed スタイルを使って実現しています。IE 7.0 の標準モード、Firefox 2.0、Opera 9.2、Safari 3 (ともに Windows XP) は期待どおり動作します。

ただし、IE 6.0 は fixed スタイルをサポートしないため、次のように absolute スタイルを使って擬似的に fixed 相当を実現しています。ですので、目立たないように工夫はしていますが、ページをスクロールしたとき、どうしてもブロック要素が 1px くらいズレながらカクカクとしてしまいます。

また IE 7.0 は互換モードのみ fixed スタイルをサポートしていません。IE 6.0 と同じく absolute で擬似的に fixed を実現しようと試みていますが解決できていません。何かよいアイディアはありませんでしょうか。特に IE 6.0 と 7.0 で position: absolute としたときの bottom: 0 の振る舞いの違いに悩んでいます。

        container
          .css('position', 'absolute')
          .each(function() {
              this.setExpression('', 'this.style.filter=""'); // --(1)
              this.style.setExpression('width', // --(2)
                'document.documentElement.clientWidth || ' +
                'document.body.clientWidth'
              );
            });

        if (body.css('backgroundImage') == 'none') // --(3) 
          body.css('backgroundImage', 'url(#fixedUI)');
        body.css('backgroundAttachment', 'fixed'); // --(4)

(1) はウィンドウのリサイズやページのスクロールなど、ブロック要素の位置が変化したときに再描画するためのおまじないです。expression() > 仮想-position:fixed を参考にしました。

(2) はブロック要素を WEB ブラウザの画面横いっぱいに表示するためのものです。width: 100% スタイルでも同じ効果が期待できますが、BODY (HTML) のマージンがあるとその分だけ余白ができてしまうので、setExpression を使って常に再描画するようにしています。

(3)(4) は (1) の再描画のチラツキを防止するためのおまじないです。IEでボックスを固定配置する方法 (ウェブのあれこれ格納庫) を参考にしました。