jQueryの練習 / スクロールに合わせて、移動するメニュー(要素)

2010年 5月 16日 |

javascript | タグ: jQuery —

Comments (1)

jQueryの練習
よくある”スクロールしてもついてくるメニュー”を、作ってみようと試行錯誤中。

やってる事は、position:absoluteしてある要素のtopを、スクロールした分に近づける処理の繰り返し、だと想像。
スクロール量の取得方法、要素をブラウザ上部からみた位置の取得方法、animateの使い方とイージングの追加方法等を調べて試してみた。

使ったライブラリ

jquery-1.4.2.js
jquery.easing.1.3.js / easingの種類を増やす

練習の途中経過

[追記 / 20100517]
IE6-7でめちゃくちゃ崩れててびっくりした。
以下を追加して回避

  top:0;
  left:0;/*これがないとIE7が右にずれる*/
  _margin-left:-12em;/*ie6が#mainのmarginに引きづられるバグの対処*/

IE6ではposition:absoluteしたメニューの次に続く要素のmargin分メニューが引きづられてた
ハックでマイナスマージンつかって戻した。
IE7はtop,leftのleftを指定しないとこれまた次の要素を基準に配置されてた(と思う)
追記ここまで。

Test page 1.スクロールに合わせて、移動するメニュー(要素):序

とりあえず動かしてみる、まずはそれからだ。
垂直スクロール量を取得するには以下の記述みたい
javascriptだと

var scrollTop  = document.body.scrollTop  || document.documentElement.scrollTop;

ブラウザ毎に挙動が違うのがjavascriptの嫌な所です。

jQueryだと以下で取得できるみたい。

$('html').scrollTop();
$(window).scrollTop();
$(document).scrollTop();

$(‘html’).scrollTop() はsafari3で常に0 が返されるので注意らしいです。

あとは、jQuery本体が使えるイージングはlinearとswingの二つだと知る。

Test page 2.スクロールに合わせて、移動するメニュー(要素):破

Webっぽいレイアウトの中に入れてみて高さを取得できるかテスト。:序に説明を書き足してたら、すでにヘッダのない2カラムになってたので、あんまり見栄えが変わらず意味がなさそうだけど、問題点が見えてきたのでよし。

メニューとコンテンツが被った時にどうするか、ウィンドウの高さが足りない時にどうするかなんかを考えたいところ。

Test page 3.スクロールに合わせて、移動するメニュー(要素):Q

:破だと、スクロールしてもメニューが初期のx座標を移動するのでヘッダが無い部分だと変。なのでそれを修正してみる。

現在の最終的なソースメモ(ゴミは後で削る)

<script type="text/javascript" src="../../_js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../_js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
offsetY=13;//1em
naviSet=$('#primaryNavigation').offset().top;//ナビゲーションの初期座標(=margin・paddingを含めたheadの高さ)
naviHeight=$('#primaryNavigation').outerHeight(true);//ナビゲーションのmargin+border+padding+heightを合わせた高さ
footerHeight=$('#footer').outerHeight(true);
bodyHeight=$('body').outerHeight(true);
windowHeight=$(window).height();
naviSetY=naviSet-offsetY;//ヘッダの高さを超えた時の位置用
});

$(window).scroll(function(){
nowY=$('#primaryNavigation').offset().top;//ナビゲーションの初期座標(=margin・paddingを含めたheadの高さ)

// var scrollTop=parseInt($(window).scrollTop());これだとIE6が動かない
 var scrollTop=parseInt($(this).scrollTop());//スクロール量

xmargin=parseInt(bodyHeight-(scrollTop+footerHeight));

if(scrollTop<naviSet){//スクロール量が最初の位置より小さい内は
 $('#primaryNavigation').animate({top:scrollTop},{duration:700,queue:false,easing:"easeOutCubic"});
}else{//最初の位置を越えたら
 $('#primaryNavigation').animate({top:scrollTop-naviSetY},{duration:700,queue:false,easing:"easeOutCubic"});
}
// console.log(":"+scrollTop);
});
</script>

css

<style type="text/css">

#primaryNavigation a {
  display:inline-block;
  width:80%;
}

#header {
  font-size:2.5em;
  border-bottom:3px solid #09c;
  margin:0 0 0.5em 0;
}
p.navigationTitle {
  background:#f8f8f8;
  padding:0 0.5em;
  margin-bottom:2px;
}

#contents {
  position:relative;
}
#primaryNavigation {
  color:dimgray;
  background:white;
  z-index:100;
  width:10em;
  margin-left:1em;
  position:absolute;
}
#primaryNavigation ul {
  line-height:2em;
  border-bottom:2px solid #09c;
  margin-bottom:3em;
}
#primaryNavigation li {
  border-top:1px solid #09c;
}

#main {
  margin:0 1em 2em 13em;
}
#main p {
  margin-top:2em;
}
p + p {
  margin-bottom:2em;
}
pre + h2 {
  margin-top:2em;
}
#footer {
  padding:1em;
  border-top:2px solid #09c;
}
</style>

html

<body>
<div id="wrap">
  <div id="header" class="header">
    <h1>スクロールに合わせて、移動するメニュー(要素):Q</h1>
  </div>
  <div id="contents">
    <div id="primaryNavigation" class="nav">
      <p class="navigationTitle"><em>乱雑モックアップ</em></p>
      <ul>
        <li><a href="#wrap">pagetop</a></li>
        <li><a href="#main">step3</a></li>
        <li><a href="#library">library</a></li>
        <li><a href="#htmlcode">htmlcode</a></li>
        <li><a href="#csscode">csscode</a></li>
        <li><a href="#jscode">jscode</a></li>
        <li><a href="#memo">memo</a></li>
      </ul>
    </div>
    <div id="main" class="article">
      <h2>STEP3.headerが無い部分の高さ調整、footerと被った部分の処理。</h2>
      <p id="anchor1">Lorem  ipsum dolor sit amet, consectetuer adipiscing elit.  Aenean commodo  ligula eget dolor.</p>
    </div>
  </div>
  <div id="footer" class="footer">
    <p>このページは乱雑モックアップのサンプルページです。</p>
  </div>
</div>
</body>

とりあえず次は

ウィンドウのサイズが狭いとフッタに被ったりしてるので、重なる前に移動を停止させたい。
どんな計算をすればいいのだろうか。
あと、Qの次は何てタイトルにすればいいんだろうか。

参考

scrollTop() – jQuery 日本語リファレンス
 jQuery の位置・サイズ関連メソッドまとめ – Cyokodog :: Diary
jQuery でブラウザの表示領域に対するサイズや位置情報を取得してみる – Cyokodog :: Diary
TO BE CONTINUED…

1件のコメント »

[...] 前回の練習以降に変更した事。 [...]

ピンバック by 続き / スクロールに合わせて、移動するメニュー(要素) « 乱雑モックアップ — 2010年5月18日 @ 18:23

この投稿へのコメントの RSS フィード。 TrackBack URL

乱雑モックアップらんざつ[乱雑] （名・形動）[文]ナリ入り乱れていること。乱れていて秩序がないこと。また、そのさま。