昨日の晩から小雨模様で、
今日は雨を覚悟していたのに、
午後から晴れ間があったりして、
チョット得した気分の
毒ウニです。
エ～ッとですね、
スクロールに追従するメニューのコトを
「フローティングメニュー」とか「エレベーターメニュー」と言うらしい。
そんな言い方があるなんて知らなかった（恥
ただ、
スクロールに追従する広告を
「フローティングアド」とか「エレベーターアド」とは言わないらしい。
まあ、そんなことはどうでもいいのですけどね。
で、
前回のアニメイトメソッドを使ったフローティングメニューの
フッターが出てこない現象を解決しようと
ゴニョゴニョやったのですよ。
根本解決ではないのですが、追従させるサイドバーが大きすぎました。
サイドバーの中でも追従させる箇所を限定すればなんとかなりました。
ちゃんと解決するには、アレもコレもそんなことも取得して、足したり引いたりして、
移動範囲を限定させるみたいです。
一応形にはなりましたが、考えて作ったというよりも、
その部分丸パクリ的になってしまいました。
ちょっと、難しかったです。
素直にプラグインを使ったほうがいいみたいですね。
まあ、実力がついたら再挑戦もありえるかな？
で、
今度は追従というよりも、jQuery で CSSを弄って固定させるスクリプトを書いてみました。
固定しても「フローティングメニュー」と言うらしいです。
position：fixed; で z-indexが変化して浮くので、この方が「フローティング」って感じかな？
jQuery のお勉強という面もあるのですが、
それ以上に、その後に必要になるメディアクエリとの兼ね合いを考えてのコトです。
基本的には、
対象となる.fix_container の中の positionプロパティに relative か static を設定して、
CSSメソッドで書き換えるのか？
それとも、新たな classセレクタに position：fixed; を指定しておいて付加するのか？
そのどちらかになります。
今回は、新たなclassセレクタを付加します。
対象位置の取得や、if eles 構文などは、
前回のアニメイトメソッドを使ったフローティングメニューを書いたおかげで
かなり楽に進みました。
あとですね、前回のスクロールとフッターの関係も考えましたよ。
って言うか、それ以上にユーザー端末次第なんですよね。
縦のサイズが小さい画面で、そのサイズ以上を固定されても迷惑なだけなんですよね。
なので、横幅は10インチクラス以上の大型タブレットまで、「フローティングメニュー」を表示。
縦の高さは、ネットブックが600px程度なので、フローティング部分はそれ以下で。
という想定ですね。
幅に関しては、プログラムでの制御も視野に、
高さに関しては、固定させる部分をあまり長くしない程度です。
まずはCSS
.side-container {
width: 350px;
float: right;
margin-top: 50px;
overflow: hidden;
}
.fix_container {
width: 350px;
margin: 0;
}
.fixed {
position: fixed;
top: 20px;
}
.move_container {
width: 350px;
margin: 0;
}
.side-container 内に .fix_container を置いて、
指定の位置までスクロールされたら、.fixを付加します。
だから、HTML的に
<div class="fix_container"> → <div class="fix_container fixed">
という風に変わるんだね。
固定させない要素も一応 .move_container で囲んで分けておく。
※チョットした注意点は .side-container に対する .fix_container の width指定。
.fix_container に width指定しないと、右側にビロ～ンとはみ出しちゃいます。
http://ameblo.jp/child-urchin/entry-11581585310.htmlでも書いたけど、
box-sizing の指定をしておくこと。
今回はないけれど、border や padding を指定したときに、
計算が必要になるからね。
で、
スクリプトは
$(function(){
var fixbox = $('.fix_container'),
offset = fixbox.offset().top;
$(window).scroll(function () {
if($(window).scrollTop() > offset - 20) {
fixbox.addClass('fixed');
} else {
fixbox.removeClass('fixed');
}
});
});
こんな感じ。
順番に説明すると、
固定する .fix_container を fixboxとしておく。
var fixbox = $('.fix_container'),
fixbox の上部の縦位置を offset として取得する。
offset = fixbox.offset().top;
スクロールファンクションですよ。
$(window).scroll(function () {
もし、offset の 20px 手前までスクロールされたら・・・・・
（- 20は、スクロールと固定したときの位置と合わせるため）
if($(window).scrollTop() > offset - 20) {
fixbox に .fixed という classセレクタを付加する。
fixbox.addClass('fixed');
if の条件が満たされないときには.fixedを外す。
else { fixbox.removeClass('fixed');
前回の .stop().animate() よりも単純だよね。
これで、指定位置までスクロールしたら、指定要素が固定するというサイドバーの出来上がり。
レスポンシブ対応できていないけどね。
ちゃんと問題なく機能しますね≧(´▽｀)≦
アニメイト処理よりも、スッキリしていて違和感がないです。
ひとつだけ問題点は、ブラウザの対応ですかね。
Firefox、IE10 、IE8 では問題ないのですが、
Chromeでは、指定位置よりも早く固定されてしまいます。
ブラウザによって、1スクロールで移動する距離が違うように感じます。
まま、ココは目を瞑りますね。
つづきますよ
jQuery でフローティングメニュー その3
前の記事
jQuery でフローティングメニュー その1