一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
position:fixedを使ってヘッダを固定した場合 ページ内リンクの位置がヘッダの高さ分ずれてしまいます。 ヘッダを固定する案件が増えてきましたので覚書です。 CSSで調整する方法と、JavaScriptで調整する方法があります。 ヘッダの高さ：100px ■HTML <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> CSSで調整する padding-topでヘッダの高さ分ずらして、margin-topでマイナスの値をいれるとうまくいきます。 margin-top:-100px; padding-top:100px; ■CSS #header { width: 100%; m
FirefoxもChromeもなかったころ、乙女の間で行われたスクロールバーの装飾はCSSが基本でした。今はというと、CSSで装飾してもIEでしか見られません。FirefoxやChromeでは普通のスクロールバーです。どうしても装飾したい場合、jQueryを使います。 使いドコロ ページ全体のスクロールバーの装飾は、今あまり見かけません。このjScrollPaneも基本的には、更新履歴など、限られた範囲内に多くの情報を掲載する、インラインフレームの様なスクロールエリアに使います。 今回紹介するjScrollPaneはgirl! vol.3告知サイトの下部にあるサンプル集や、PSP用乙女ゲーム青春はじめましたの更新履歴部分などに使われています。 1.使うもの 公式サイトから必要なものをDLします。 jQuery jquery.jscrollpane.min.js jquery.mousewh
ボックス全体をリンクにしたい まずはこちらの発想の元ネタのサイトの紹介。 Link Boxes (Ask the CSS Guy) やりたいことは上記ページの上部の画像のように、見出しやテキストを置いている部分をリンクボックス化したいという主旨。マークアップや正しい書式にこだわらないなら簡単にできるのだが、ちゃんとした事をしたい人向けのTips。 ※以下のソースは上記サイトからの引用です。 上記サイトの言いたい事を簡単な日本語にして主旨だけ書きます。 ※訳とかまとめ要らないという方はその先に「それ、jQueryでやってみる」とか書いてみたので良かったらそちらへ進んでください。 まず中身はこんな感じ。見出しとテキスト。 <h2>About Us</h2> <p>How my life story became a Hallmark movie.</p> これらをボックスにしてリンクを付けたけ
同じ会社のYさんが、動くメニューが作りたいということで、 JavaScriptでアニメーションするようなメニューを探していた。 そしてYさんが「Fancy menu」というのを見つけていた。 Mootoolsのライブラリを使って動作するものらしい。 MootoolsではなくてjQueryのプラグインで無いかなって探したところ、 「LavaLamp menu」というプラグインを発見。 いろいろなところで利用できそうなので、試しに使ってみた。 ※現在IEだとうまく動作しない様子。 CSSの設定がうまくいっていないのもあるので後ほど調節予定。 ※追記（8/22） IE7ではうまく動作するようです。 IE6ではここのブログ上ではうまく動作しない現状です。 ※追記 全体的にうまく動作していないので後で修正します。 今はまだスムーズに動いてくれないようです。 ※追記（8/22） Fx,Opera,Sa
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
