スクロール時に要素の表示・非表示を切り替えたり、固定配置する動きを実装できるスクリプト 10 - NxWorld
見かけることが多いスクロールしていくと途中から要素が表示されたり、一定の範囲内のみで要素が固定配置されるといった動きを実装できるスクリプトのまとめです。 中にはスクロールアップ時には〇〇して、スクロールダウン時には△△するというように、スクロールした方向によって動きを変更したり、特定の箇所まで行ったときに関数を実行するというような動きを実装できるものもあります。 紹介している中で特にシンプルな動きのものは、わざわざこういったものを使わなくとも自分で1から実装してしまう方も多いでしょうし、ググれば実装方法も沢山出てはくるものの、スクリプトが苦手な方や少しでも手っ取り早く実装したいという方にはやはり便利だと思います。 探せばもっと高機能なものや使いやすいものが沢山あるとは思いますが、ここでは自分も利用したことがあるものや目についたものを紹介します。 Headroom.js スクロールの方向（上
jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法｜BLACKFLAG
今やWebサイトを作る際にはほぼ必須アイテムとなっている ページの最上部に戻るための「ページトップへ」ボタン。 最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。 そんな「ページトップへ」ボタンの出現方法を フェードイン／アウト、下方向からスライドイン／アウト、ボタン要素を拡大／縮小、 の3つパターンで実装する方法を紹介してみます。 【フェードイン／アウト】 jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法 「【フェードイン／アウト】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示 ページ内を一定距離スクロールすると 画面右下に位置固定した形で「ページトップへ」ボタンが フェードインして表示されます。 サンプルではページ内を100pxスクロールすると ボタン
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
ヘッダは上部固定で、フッタは最下部にするスタイルシート、レスポンシブにも対応！ | コリス
ナビゲーションを配置したヘッダはスクロールしても常に上部に固定されており、フッタはコンテンツの量が少なくても最下部に配置されるページを実装するスタイルシートを紹介します。 Sticky footer with fixed navbar コンテンツが少なくてもフッタは最下部に、レスポンシブ対応で！ デモ Bootstrapに素晴らしいデモがあったので、そこからデモを紹介します。 デモでは、ナビゲーションがあるヘッダはスクロールしても常に上部に固定されています。 デモのコンテンツ量が少ないため、狭い表示エリアで。 デモページ：幅780pxで表示 実装 実装はデモを必要最小限にしたもので、紹介します。 HTML 上からナビゲーションのあるヘッダ、コンテンツ、フッタの順で、ヘッダとコンテンツはdivで内包し、終わりにコンテンツ量が少ない時用にpushのdivを配置します。 <body> <div
20 great examples of website footer design
When starting any website project, it's natural to want to concentrate your design efforts on the homepage and the header. As a result, the footer often becomes an afterthought - relegated to a poorly designed dumping ground for copyright information, legal disclaimers and spammy SEO links. But it shouldn't be this way. The footer of a website is as important as the header, if not more so. Why? Be
あなたが作ったサイトのフッターの役割は？12のフッター活用方法！
昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ
ヘッダーとフッターを常時表示するjQueryライブラリ·Keep-in-View MOONGIFT
Keep-in-Viewはヘッダーやフッターを常に画面上部（または下部）に表示し続けるjQueryライブラリです。 最近のWebサイトではヘッダーがスクロールしても常に表示され続けるUIが人気です。同様にフッターも表示し続ける、そんなjQueryプラグインがKeep-in-Viewです。 最初の表示です。ヘッダーとフッターに注目です。 一番下までスクロールしました。ヘッダーが残っています。 途中までのスクロールの場合は普通に上に上がっていきます。 表示されない状態までいくと自動的に上に張り付きます。フッターは常に下にあります。 Keep-in-ViewではオフセットやCSSのz-indexがオプションとして指定できます。 Keep-in-ViewはJavaScript/jQuery製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）になります。 MOONGIF
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
50+ CSS Headers
Look Out Below! 15 Fabulous Footer Designs