Hatena::ブログ(Diary)

Cyokodog :: Diary

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

September 04, 2011

サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed

更新履歴

2012-04-27
Ver 0.2.0
再実装し、もろもろ痒いとこを解消しました。詳しくは下記エントリをどうぞ。
一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました
2012-02-09
Ver 0.1.3.1
Firefox の場合、watchPosition パラメータ が true でスクロール状態で画面更新すると固定位置がずれる不具合を修正しました。
IE の場合、水平方向非固定処理が有効にならないケースがある不具合を修正しました。
2011-12-31
Ver 0.1.3
固定表示する要素の位置が変化するケースにも対応しました。 Demo
2011-11-05
Ver 0.1.2
IEで、固定表示する要素のmarginがautoの場合、正しく処理されない不具合を修正しました
2011-10-06
Ver 0.1.1
スクロール開始時に対象要素の表示位置が1pxずれる不具合を修正しました。
スクロールされた状態で、画面をリロードすると対象要素の表示位置がずれる不具合を修正しました。

サイドメニューの固定表示に position:fixed を適用するというケースがあると思いますが、表示位置が常に固定される故に、スクロール時にメニューがフッターに被らないようデザインしたり、ウィンドウの表示枠に収まるメニュー数に調整したりと、デザイン上の配慮がいろいろ必要になったりします。

jQuery Ex Flex Fixed を使用するとこういった事を極力気にせず、position:fixed を適用することができます。(IE6 には対応してません・・面倒だったので・・)

使い方

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

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

以下のようなレイアウトで、サイドメニューを固定する場合、

<div class="header">header</div>
<div class="body">
	<div class="sub-contents">
		<ul class="sidemenu">
			<li>link</li>
			<li>link</li>
			<li>link</li>
		</ul>
	</div>
	<div class="main-contents">
		main
	</div>
</div>
<div class="footer">footer</div>

サイドメニュー要素である ul.sidemenu に対し、exFlexFixed() メソッド適用し、container パラメータに、fixed を有効にする範囲となる div.body 要素を指定します。

jQuery(function($){
	$('ul.sidemenu').exFlexFixed({
		container : 'div.body'
	});
});

Demo

特徴

ヘッダー領域の活用

通常の position:fixed では以下のように、垂直方向にスクロールした際、ヘッダーのあった領域にスペースができてしまいます。

f:id:cyokodog:20110903103308p:image

Ex Flex Fixed を適用すると、スクロール時にヘッダー領域のスペースがある状態では、position:fixed が適用されないので、スペースを無駄にしません。

f:id:cyokodog:20110903103309p:image

Demo

フッター領域に被らない

通常の position:fixed では、垂直方向のスクロールをしてくと以下のように position:fixed 要素がフッター領域に被ってしまいます。

f:id:cyokodog:20110903103310p:image

Ex Flex Fixed を適用するとフッター領域に被る直前で position:fixed の適用が解除され、フッターに被りません。

f:id:cyokodog:20110903103311p:image

Demo

ウィンドウ高さを超えるメニュー数でも表示可能

メニュー数が多く、ウィンドウの表示領域以上の高さがある状態でスクロールした場合、最下段のメニューが表示されるまで position:fixed が適用されません。

Demo

水平方向スクロールでは固定されない

水平方向にスクロールした場合は position:fixed は適用されないので、メニューがコンテンツに被ることはありません。

Demo

コンテンツ領域からの相対位置での固定表示

marign:0 auto などでコンテンツをセンタリング表示してるデザインでは、ウィンドウをリサイズするとコンテンツの X 座標が変化しますが、コンテンツの相対位置で固定表示されるので、ウィンドウをリサイズしても表示位置がずれません。

Demo

fixed させておきたい範囲を指定可能

fixed させておきたい範囲の高さを持つ親又は先祖要素を container パラメータにて指定します。

Demo

jQuery Ex DropDown との併用

Ex DropDown(リスト要素をドロップダウンメニューに変換する jQuery プラグインを作ってみた - Cyokodog::Diary)と併用するには、以下のように記述します。

jQuery(function($){
	$('ul.sidemenu').exDropDown().exFlexFixed({
		container : 'div.body'
	});
});

f:id:cyokodog:20110903233336p:image

Demo

固定表示要素の位置が変化する場合の対応

例えば、上方に配置された要素のサイズが変化し、固定表示要素の位置が変化するような場合は、以下のような記述で固定表示位置を補正できます。

jQuery(function($){
	$('ul.sidemenu').exDropDown().exFlexFixed({
		watchPosition : true,
		container : 'div.body'
	});
});

Demo

watchPosition には ms 単位の数値を指定することもできます。この場合は指定の数値間隔で表示位置の変化を検出します。true を指定した場合は、300ms で監視します。

ダウンロード

こちらからどうぞ

dadadada 2011/10/05 21:22 便利なスクリプトを公開していただきありがとうございます。
まさに自分が欲しいものだったのですが、2点問題がありました。

・ページ途中でリロードした時に表示位置がおかしくなる
確認環境:Firefox6.0.2 Win、Chrome14 Win、IE8

・スクロール開始するとメニューが1ピクセル右にズレる
確認環境:Firefox6.0.2 Win

自分のページ固有かと思ったのですが掲載されているデモページでも確認できました。

もし対応可能でしたらよろしくお願いいたします。

pirukuru1pirukuru1 2011/10/05 21:55 jquey.exfixed.1.2.2について教えていただきたい点があり、
本記事と別件で申し訳ございませんが、コメントさせていただきました。

教えていただきたい点は下記の処理になります。

if(html.css('background-image') == 'none'){
html.css({'background-image':'url(null)'});
}

上記の'background-image'をnone→url(null)に変換することにより、
/xxx/nullというリクエストが行われています。

'background-image'を指定しない場合、noneの指定が正だと考えておりましたが、
上記の変換を行った経緯/理由等ございましたら、
教えていただけないでしょうか?

cyokodogcyokodog 2011/10/06 00:40 dadaさん

フィードバックありがとうございます。
ご指摘いただいた不具合、修正しgithubにアップしました。
また何かありましたら、よろしくお願いします。

cyokodogcyokodog 2011/10/06 01:15 pirukuru1さん

コメントありがとうございます。
’background-image’:’url(null)’の指定はIE6でposition:fixed した際、
ガタつきを防止するために行っております。
詳しくは下記エントリーにまとめてありますので、ご覧ください。

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

dadadada 2011/10/06 10:52 素早い対応ありがとうございました。
1pxズレも、ページ途中からの問題も解決されてすっきりです。(´ワ`)

しかしながらIEではフローティングが常に一番上になってしまうようです。
IE8で確認いたしました。Firefox、Chromeでは問題ありません。
お手すきの時にでも対応していただけると幸いです。

cyokodogcyokodog 2011/10/06 15:05 dadaさん

>しかしながらIEではフローティングが常に一番上になってしまうようです。
以下のページをこちらの環境のIE8で見たところ、特に問題なさそうなのですが、問題の発生してるページ(もしくはソース)を見せて頂くことはできますでしょうか?

cyokodogcyokodog 2011/10/06 15:07 すいません。URL下記忘れました
http://cyokodog-lab.appspot.com/exj/exflexfixed/example-1.0.0.html

youchyouch 2011/10/25 10:16 同じページ内で、2か所を別々にfixedさせたいのですが、可能でしょうか。

cyokodogcyokodog 2011/10/26 01:03 dadaさん

できますよー
http://cyokodog-lab.appspot.com/exj/exflexfixed/example-1.5.0.html

pontaponta 2011/11/05 01:13 この処理ができるソースを探していまして、検索からこちらへ伺わせていただきました。
素晴らしいソースをありがとうございます!

早速、これを利用させていただきたいと考えております。

一点お伺いしたいのですが、この処理を適用した要素にbackground-imageで画像を設定した際、その画像はスクロールに連動しないように思うのですが、これをさせる事は可能でしょうか?

※blogのカラムに対しての適用を考えております。

お知恵を拝借できれば幸いです。

pontaponta 2011/11/05 01:35 失礼しました。こちらでDEMO用のサンプルで改めて検証したところ、連動しました。
大変申し訳ございませんでした。

cyokodogcyokodog 2011/11/05 08:07 pontaさん

どうもです。また何かありましたらコメントください

pontaponta 2011/11/05 12:14 cyokodogさん

ご返信くださり、ありがとうございます。
度々申し訳ないのですが、demoソースを少しいじらせていただき、気がついた事なのですが……。

スクリプト内の
-------------
jQuery(function($){
$('ul').exFlexFixed({
container : 'div.ex-main-contents'
-------------

の<ul>を<div.○○○>など、ul以外の要素に変更した場合、Firefoxやchromeでは動作したのですが、IEでは命令が無視され、正常に動作しませんでした。
こちらのイージーミスかもしれないのですが……。
ソースを下記にアップいたしましたので、お手すきの時に、対応策をご教授いただければ幸いです。

http://xfs.jp/wt4fr

cyokodogcyokodog 2011/11/05 20:23 pontaさん

ご連絡ありがとうございます。不具合でした。
修正版(ver 0.1.2)をgithubにアップしましたのでこちらをご使用ください

pontaponta 2011/11/06 04:43 cyokodogさん

迅速なご対応をいただき、ありがとうございました。
……というか、こちらの見当違いな報告にご対応くださり、大変に感謝しております。

もう一点発見したのですが、jQuery Ex Flex Fixedを対応させる要素が……

<!--plugin-->
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<!--/plugin-->

のように、コメントで囲まれている場合、ウインドウ自体はきちんとfixed動作するのですが、画像がついてこなくなります(通常のコメントの場合は問題ありません)。

htmlレベルではどうも対応ができそうになく……お手数とは存じますが、回避策などあるようでしたら、ご教授いただければ幸いです。

pontaponta 2011/11/06 04:44 <!--plugin-->
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<ul>
<!--/plugin-->

申し訳ありません。上記でした。

cyokodogcyokodog 2011/11/06 10:57 pontaさん

頂いたサンプルhtmlで確認してみたところ、コメント文の有無にかかわらず、背景画像は消えるようでした。
ul要素を囲むdiv.leftmenuの背景画像として以下のように定義されており
div.leftmenu{
position:fixed;
background-image : url("./test.png");
}
内包要素であるulにexFlexFIxedを適用することで、div.leftmenuが高さを失うため画像が非表示になると思われます。(なのでdiv.leftmenuに適当な高さを指定すると画像が表示されます。)
画面のコンテンツ量に合わせて高さを調整したい場合は、以下を参考にしてみてください
http://d.hatena.ne.jp/cyokodog/20101101/exresize01

pontaponta 2011/11/06 17:12 cyokodogさま

 おかげさまでexresizeの導入なしでも、ローカルでは問題なく動作したのですが、サーバー(FC2)にアップしたところ、メニューは正常に動作しましたが、画像だけ動かなくなりまして……。

----------
<div class="menuBlockHead" style="text-align:<%plugin_first_talign>"><%plugin_first_title></div>
<div class="menuBody">
<div class="menuText">

<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>
</p>
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
----------

 上記から<%plugin_first_content>を削除すると、問題なく動作することは確認できました(このブラグインは、ブログのカラムのテキスト表示を行います)。
 ご指摘くださったjQuery exResizeを導入してみたのですが、私のやり方が悪いのか、きちんと動作しないようでして……。

 また、試しに、cssに高さを調整するプロパティを追加してみたのですが、こちらはfooter領域に食い込んでしまいまして、正常に動作しませんでした。

 ここさえ対応できれば、完成なのですが、お手数とは存じますが、ご教授いただけないでしょうか?

 念のため、下記にローカル版のファイルを念のためにアップいたしました。

http://xfs.jp/x8SrB

 お忙しいところ、お尋ねしてばかりで申し訳ないのですが、何とぞ、よろしくお願い申し上げます。

cyokodogcyokodog 2011/11/06 19:18 pontaさん

fc2にアクセスした際に出力されるマークアップが、ローカルで確認された時の内容と異なることが原因ではないかと推察されますが、アップされたfc2のurlを教えていただくことはできますでしょうか?

pontaponta 2011/11/06 19:26 cyokodogさま

 早速のご回答ありがとうございます!
 ……と、事情がありまして、URLを出せないため、Twitter経由でやり取りさせていただいて宜しいでしょうか?
 先ほどフォローさせていただきましたので、承認していただけたら、メッセージでURLをお送りできればと思いますが……。

cyokodogcyokodog 2011/11/06 23:56 pontaさん

すいません。twitter見たのですがpontaさんらしきフォローユーザが見当たらないのですが・・(承認依頼というのがくるのでしょうか?)
もしあれでしたらメールのやりとりでもよろしいでしょうか?

pontaponta 2011/11/07 08:33 あ、申し訳ございません。
pから始まるアカウントで登録申請させていただきました。

メールでも構いませんので、よろしくお願いいたします。

broomstick.mobile@gmail.com

cyokodogcyokodog 2011/11/07 11:26 pontaさん

ではメールでお願いします。

sakakisakaki 2011/12/29 15:33 cyokodog様
初めまして。まさにこのような機能を実装したくて探していたので感動しています。
ありがとうございます。

今回は、質問があってコメントさせていただきました。

私は同一ページ内で、この「ExFlexFixed」と合わせて「ExFitFrame」を使わせていただこうと思っているのですが、
「ExFlexFixed」を効かせた要素の下、または上に「ExFitFrame」を効かせたインラインフレームを置くと、
インラインフレームが途切れてしまいます。

説明がうまくなくて申し訳ないのですが、「ExFitFrame」のデモページを例にさせていただきますと、
http://cyokodog-lab.appspot.com/exj/exfitframe/example-1.0.0.html

'iframe.sample'の内容が増えてどんどん下に伸びていくと、途中で「Sub Contents」(←これに「ExFlexFixed」が効かせてあると仮定して)に隠れて見えなくなってしまうのです。

「Sub Contents」の下に'iframe.sample'を置いた場合は、インラインフレームの上部が「Sub Contents」の内容に隠れてしまう形になります。

(「Sub Contents」に「ExFlexFixed」を効かせていない場合は、問題なくインラインフレームが表示されます。)

これの解決方法がもしありましたら、もし可能でしたらお教えいただければ大変ありがたいです。
お忙しいところ申し訳ないのですがよろしくお願いいたします。

cyokodogcyokodog 2011/12/30 03:05 sakakiさん

場当たり的な対応になってしまいますが、以下のような処置をすれば上方にexfitframeをおいた場合については対応できるかと思います。

まず exflexfixed-0.1.2の77行目付近に
adjustPosition();
という記述があるので、この上に

o.adjustPosition = adjustPosition;

という記述を追加します。
つぎに呼び出し側を以下のように記述します

var api = $('ul.xxx').exFlexFixed({ container : '***'
}).data('ex-flex-fixed');
setInterval(function(){
api.config.target.css('position','static');
api.config._baseTop = api.config.target.offset().top;
api.config.target.css('position','fixed');
api.adjustPosition();
},300);

sakakisakaki 2011/12/30 21:01 cyokodog様

早々にお返事くださいましてまことにありがとうございました。
ご指示の通りにやってみたのですが、「オブジェクトはadjustPositionプロパティまたはメソッドをサポートしていません」というエラーが出てうまくいきませんでした。

私が素人すぎておかしなことをやったせいだと思います。

exflexfixed-0.1.2の77行目を、
adjustPosition();
から
o.adjustPosition = adjustPosition;
adjustPosition();
に変更したまでは正しかったと思うのですが、呼び出し側の記述がおかしかったのかもしれません。

以下のように書きました。(ul.xxxとcontainer : '***'の部分は自分の環境に合わせて書き換えました)
<script>
jQuery(function($){
var api = $('ul.xxx').exFlexFixed({ container : '***'}).data('ex-flex-fixed');
setInterval(function(){
api.config.target.css('position','static');
api.config._baseTop = api.config.target.offset().top;
api.config.target.css('position','fixed');
api.adjustPosition();
},300);
})
</script>

jqueryの書き方などにまったく精通していないため、どこか間違ったのだろうと思いながらも
さっぱりわかりません。(^^;)

しかしながら、この年末の忙しい中、cyokodog様にご尽力いただきましたこと、心より感謝しております。

解決してくださろうと貴重なお時間を割いてくださってありがとうございました!

sakakisakaki 2011/12/30 22:54 cyokodog様

sakakiです。何度も申し訳ございません。
さきほどのコメントを送信してから一時間半ほど経って、もう一度ページを表示してみたところ、エラーが出たときと記述は何も変えていないのに今度はうまくいきました!

時間を置いたからといってなぜうまくいくのか?
仕組みはわかりませんがとにかく大変ありがたく思っています。

お騒がせして申し訳ありませんでした。

ご自身でこのようなプログラムを開発できてしまうなんて本当に素晴らしいです。
感謝しています。

「ExFlexFixed」と「ExFitFrame」を上下で使うことができて、嬉しいです。

ご丁寧に、本当にありがとうございました。

cyokodogcyokodog 2011/12/31 01:35 sakakiさん

おっと、動いちゃいましたか
一応プラグインを改造して簡単に対応できるようにしてみました
http://cyokodog-lab.appspot.com/exj/exflexfixed/example-2.0.0.html

こちらの場合、watchPositionパラメータにtrueを指定するのみでOKです。よろしければgithubよりver 0.1.3でお試しください

sakakisakaki 2012/01/10 19:07 cyokodog様

明けましておめでとうございます。
年末、一人でコメント欄で大騒ぎして、動かなかっただの動いただのと
cyokodog様にご迷惑をおかけしましたのに
お優しい対応をしてくださって本当にありがとうございます。

改造プラグイン、素敵です!!
とてもありがたいです!!
早速使わせていただきます!!

とても実用的で使いやすいプラグインを開発してくださって
感謝しています。
ありがとうございました!

tsubotsubo 2012/02/01 14:34 cyokodog様

はじめまして、googleでjquery, position, fixedで検索してここにたどり着きました。
早速、使わせていただいたのですが、exFlexFixedを使用するとサイドバーのメニューの横幅が短くなってしまいます。何か使い方か間違っているか、前提条件に合っていないのかも知れません。

もし、よろしければ、以下のサイトにサンプルをアップして有りますので、ご確認頂けないでしょうか。
よろしくお願い致します。

■exFlexFixedを使ってメニュー幅が短くなってしまったケース
http://jsfiddle.net/tsubo/3qRrm/
http://jsfiddle.net/tsubo/3qRrm/embedded/result/

■exFlexFixedのコールをやめた時のイメージ
(このイメージでサイドメニューを固定したい)
http://jsfiddle.net/tsubo/2uNEh/
http://jsfiddle.net/tsubo/2uNEh/embedded/result/

cyokodogcyokodog 2012/02/04 00:06 tsubo さん

適用要素(例の場合ではul要素)に対し、position:fixedがあたるので、幅が詰まってしまいますので、widthで幅を指定する必要があります。

tsubotsubo 2012/02/04 12:20 cyokodogさん

ご確認ありがとうございます。
ul に対して width: 100%を設定してみました。

■ ulに widthを設定したケース
http://jsfiddle.net/tsubo/y5dEf/

親要素である div#content-sub-1に対する比率になるのが正しい動きかと思うのですが、ウィンドウ全体の比率になってしまっているようです。div#content-sub-1のwidthをウィンドウ全体の比率で20%としている為、ulに対してもwidthを比率で設定する必要があります。

お手数おかけしますが、ご確認とアドバイスを頂けないでしょうか。
よろしくお願い致します。

cyokodogcyokodog 2012/02/04 19:24 tsuboさん

position:fixedをかけた要素のサイズは親要素の比率ではなく、ブラウザの表示領域に対する比率になります。
以下の例だと#bの幅は#aより大きくなります
<style>
#a{
width:400px;
height:200px;
background:#aaa;
}
#b{
background:#ccc;
position:fixed;
width:100%;
}
</style>
<div id="a">
<div id="b">bbbbbbbb</div>
</div>

tsubotsubo 2012/02/04 21:34 cyokodogさん

ご回答ありがとうございます。
私が勝手にこのプラグインに多くの機能を期待していただけと言うことのようです。

上記の例で#bのposition: fixed; がなければ、#bのwidthは親の#aに対する比率ですよね。
posision: fixed すると、固定する位置、width共にブラウザの表示領域に対する指定に変わります。
それを、なんとかねじ曲げて親要素に対する指定にできるのがこのプラグインかと思っていました。
親要素に対して指定出来るようになるのは固定する位置のみと言うことですね。

cyokodogcyokodog 2012/02/05 00:13 tsubo さん

ご指摘のとおりこのプラグインでは表示位置の調整のみしか行っておりません(貴重なご意見ありがとうございます&ご希望にそえずすいません)
ご提示いただいたサンプルのようなケースで、常に親要素と同じ幅を保ちたい場合は、以下のように処置してみてはいかがでしょうか

$('ul.sidemenu').exFlexFixed({
container: 'div#wrap'
});
var adjustWidth = function(){
var w = $('#content-sub-1').width();
$('ul.sidemenu').width(w);
}
adjustWidth();
$(window).resize(function(){
adjustWidth();
});

exFlexFixedメソッド適用後に、メニューの幅を親要素と同じにし、windowのリサイズが行われた際も、同じことをしてます。
windowのリサイズ以外の要因で
#content-sub-1の幅が変わってしまうケースでは、setTimeoutとうで幅を監視するか、以下のようなプラグインが必要になるかと思います
http://d.hatena.ne.jp/cyokodog/20101101/exresize01

tsubotsubo 2012/02/05 09:35 cyokodogさん

ご提案頂いた方法で修正できました。
ありがとうございます。

私としてはこのメニュー幅補正機能をプラグインに盛り込んで欲しいです。
プラグインを導入することで元々の動きやデザインがデグレードしてしまい、その為の修正コードやCSSを加えていくと、メンテナンスが困難になってしまいます。
exFlexFixedはメニューがフッターに被らないように調整してくれていたり、大変素晴らしいです。ぜひ、メニュー幅の補正も入れて欲しいです。

それから、続けて申し訳ないのですが
exFlexFixedを使用した時に、メニューを囲んでいたborderが崩れてしまいます。こちらもどうにかならないでしょうか?
赤いラインがborderです。

■exFlexFixed使用前
http://jsfiddle.net/tsubo/7EmRf/

■exFlexFixed使用後
http://jsfiddle.net/tsubo/JkaRU/

cyokodogcyokodog 2012/02/05 18:55 tsuboさん

幅補正の件、検討致します。
borderの件ですが、内包要素のulにposition:fixedがあたると自身の高さを失ってしまうのが原因です(cssの仕様です)
やはり高さを保つには以下のような工夫が必要かと思われます

var h = $('#content-sub-1').height();
$('#content-sub-1').height(h);
$('ul.sidemenu').exFlexFixed({
container: 'div#wrap'
});

poisiotn:fixedが当たる前に高さを固定化してます

tsubotsubo 2012/02/05 19:31 cyokodogさん

上記のjsでの枠固定ですが、スクロールさせた場合にメニューは固定されているのに枠だけスクロールしてしまいました。枠の方も動的に修正してやる必要がありそうです。
できれば、こちらの補正機能をプラグインに盛り込む件も検討していただけるとうれしいです。

cyokodogcyokodog 2012/02/05 21:03 tsuboさん「

枠のある #content-sub-1はexflexfixedを適用してるulの親要素なので、位置は固定されません。
枠も固定したい場合は、#content-sub-1に対しexflexfixedを適用する必要があります
$('#content-sub-1').exFlexFixed({
container: 'div#wrap'
});

tsubotsubo 2012/02/06 01:28 cyokodogさん

いろいろアドバイスありがとうございました。
大分、このプラグインの仕組みがわかってきたので、後は色々試してみます。

n an a 2012/02/07 12:54 cyokodogさん

こちらのスクリプト使用させて頂いているのですが、一部固定の場合に、下部の方でリロードするとiframeの部分に文字が被ってしまうようです。
http://cyokodog-lab.appspot.com/exj/exflexfixed/example-2.0.0.html
現象はFirefoxの10.0で確認したものです。

もし可能でしたら修正頂けたら、幸いです。
宜しく御願い致します。

cyokodogcyokodog 2012/02/09 02:07 n a さん

ご連絡ありがとうございます。
修正しgithubにあげました(ver 0.1.3.1)
(水平方向非固定処理にてIEでバグがありましたのでついでにこちらも修正しました)

n an a 2012/02/09 10:32 cyokodogさん

御対応ありがとうございます。
早速使用させて頂きます!
ありがとうございました。

namaenamae 2012/04/26 00:14 素敵なスクリプト使わせていただいております

1つ質問です。

既出かもしれませんが、
Demoでいうところの文字が沢山入っているメイン領域の高さが可変の場合、
(トグル系のスクリプトを使って開閉するエリアを含んでいるため)
途中までスクロールすると、
Fixedしたエリアが下までついてこず途中で置いてけぼりになっていました。
何か解決方法ございますでしょうか?

よろしくお願いいたします。

cyokodogcyokodog 2012/04/26 01:16 namaeさん

こんな半年以上も更新してないブログにコメントいただきありがとうございます!
Ex Flex Fixed ですが、自分もいろいろ使ってみてかゆいとこだらけだったので、
(公開してないのですが)リニューアル版を作りました
ご指摘されてる件もこちらなら解決できると思いますので、近いうちに記事まとめて公開しますので、今しばらくお待ちください

cyokodogcyokodog 2012/04/27 08:08 修正版リリースしました
http://d.hatena.ne.jp/cyokodog/20120427/exflexfixed01

namaenamae 2012/04/28 19:13 ありがとうございます!
さっそく試してみようと思います。

ひでまんひでまん 2012/11/25 13:56 素晴らしいライブラリありがとうございます。
使い方まとめてみました。
http://www.matomater.com/413/

cyokodogcyokodog 2012/11/27 01:17 おお、ご紹介ありがとうございます!

たつたつ 2013/07/07 02:13 こちらのスクリプトにお世話になっております。

現在公開中のウェブサイトは左に10個のサイドメニューを表示中です。

大きいディスプレイで全画面表示をするときちんとサイドメニュー最上部からメインコンテンツ終了まで追従するのですが、

小さいウィンドウにして動作確認をするとサイドバー最上部ではなく3つ目ほどの高さで固定されてしまいサイドメニュー全てが追従する形にならないのですが、この場合はどういった指定が必要でしょうか。

お忙しいとは思いますが、お時間のあるときにでもご回答いただけるとありがたいです。

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


画像認証

リンク元