要素をスクロールしても画面上部にひっつかせる

・・・とタイトルに書いたがなんのことか全くわからないと思われる。このブログをスクロールしたときに画面一番上にヘッダーが固定されているのが分かると思うが、基本的にはそれと同じことをしたい。

ヘッダーだけを固定化するのであれば、CSSでposition:fixed;にすればいいのだが、（対応していないブラウザの人は我慢してもらう）次のような場合はどうだろう。

最初は画面右側（最上部ではない）にナビゲーションメニュー的な状態で表示されている。
下にスクロールしていくと、このメニューは徐々に画面上、上に動く。要するに普通の文字列と同じように動く。
が、画面の最上部に達すると、

というように画面最上部で静止し、その後はいくらスクロールしても動かない・・・
といったヤツ。

名前は知らないが最近よくみる仕組み。

実際にやってみる

さて、これをCSSとJavaScriptで実現したい。

目標は

ヘッダー直下にメニューが存在して、メニューが隠れる寸前までは通常の文字列と同様にスクロールする。メニューが画面上部に接したらば画面の右上にメニューが据え置きされる。

まずは、対象のブロックのidをmenuとでもしておくと、
#menu{
   position:fixed;
   right:0px;
   top:**px;
}
で右側によってくれる。

topの初期値？

今回はtopの値を固定化している。本当はこの初期値も取得できれば良いのだが、なかなか奥が深く自分はまだ理解に至っていない。それに関する（と思われる）議論は以下のページが詳しい（のだと思う・・なんせ理解していないので）。
http://d.hatena.ne.jp/elm200/20080203/1202009300

なので、ここでは簡単にするためにヘッダーの高さheightを一定に固定し、初期状態ではその直下に目的のメニューを配置するに至っている。

スクロールした時のイベント

window.onscroll = function(){
   if((topPos=height-window.scrollY)<0){topPos=0;}
   document.getElementById("main").style.top=topPos;
}
で良かろう。heightはヘッダーの高さを入れる。面白い動きをさせて「おー」と言いたいだけなのでブラウザごとの対応など全く考える気はないが、多分たいていのブラウザで動作する。

まず、スクロールのイベントはwindow.onscrollでいい。

10px下にスクロールしたときは、mainは実質、上に10px動けばいいのだから[元の位置=height]-[スクロール量]が移動後の位置（topの値）。

ただ、これは負のときは画面上部に据え置きにする約束なので、ifで0になるようにしておく。

ということで、完成品

CSS
メニュー本体

position:fixed; right:0px; top:[height]px;

ヘッダー

height:[height]px;

JavaScript

if((topPos=[height]-window.scrollY)<0){topPos=0;}document.getElementById([menu]).style.top=topPos;

height: ヘッダーの高さ

menu:メニューのID

Webページ作成ソフトいろいろ

Webページを作成するときにメモ帳・・・も良いのだが、色分けされていないとモチベーションも下がるし見にくい。そこで、Webページ作成に便利なソフトを探してみた。

1. ez-HTML
http://www.w-frontier.com/software/ezhtml.html

★★☆バージョン7.70
個人的に必要なのは、カラーコード貼り付け・入力補助（リストが出るやつ）・テンプレート・置換くらい。なので自分にとっては余計な機能がありすぎだったりもするが、大は小を兼ねるというので、まずまず。

2. HeTeMuLu Creator
http://hosiken.jp/dev/hetecre/

★☆☆バージョン1.10a
CSSの色分けがないのは致命的。カラーコード挿入もデフォルトでクオテーションマーク「"」をつけるという、実にすばらしい配慮があってめんどくさい。でも、画面のデザインは割と美しいので我慢して使うこともある。
なお、Vista・7を使っている人はプロセスが終了してくれない不具合があるのでベータ版を上書きする必要がある。ずいぶん前からベータ版なんだが、正式版はまだ出ない。

3. Crescent Eve

★★☆バージョン0.84
過不足がない感じが良い・・・のだが、HTMLエディタとしてはheadタグ等の決まり切った部分を挿入してくれる機能がないので困る。「定型句」で設定すれば良いのでしょうが・・。

4. Aptana Studio

★★★バージョン3.03
外国産オープンソースのエディタ。日本語に弱いのは難点だが、何よりも多機能。ez-HTMLの多機能さとは別の次元の多機能。Webサーバーも内蔵している模様。難点は動作がすこし重いことだが、まぁ我慢の範囲内である。