Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
ウェブページに固定表示させるエレメントの効果的な使い方
「positon: fixed;」などで配置した、スクロールしても固定位置に表示されるエレメントの効果的な使い方を紹介します。 Fixed position web elements [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブページで固定表示されたエレメントは、最近多く見かけるようになりました。これはページで表示されていない箇所へスクロールした時に、特定のエレメントのみ表示を残すものです。最もよく見かけるのは、ナビゲーションを含めたヘッダでしょう。 エレメントを固定表示することで最も大切なことは、それがユーザーにとって重要なものである、ということです。エレメントの重要性は変化することもありますが、基本的なゴールはページのいずれかの部分を永久にビューポートに表示することです。 もし、このテクニックを使うときは、慎重に検討することを勧めます。このエレメントは自動
ある程度スクロールすると、途中から位置が固定になるコンテンツを見かけたことはありませんか？ 今回はjQueryを使ってそれを作ります。 デモ1 デモ2 途中から位置が固定されるナビゲーションのデモ 1 & 2 ダウンロード 今回使うHTMLはこんな感じです。 <div id="header"> <h1>タイトル</h1> </div> <div id="container"> <div id="main">左カラム（メインコンテンツ）</div> <div id="sidebar"><!-- サイドバー --> <div id="nav">ここを固定する</div> </div> </div>#mainと#sidebarはfloat: leftしています。 これの#navが表示エリア上部から20pxの位置まで来たら位置を固定したいと思います。 position: fixedを使って固定する
当ブログの今年の目標は、ずばり「UIの強化」としています。そのためにもJavaScriptやjQueryの習得は必須条件となりますから、このブログを通して、いろいろ試していければよいなと思っています。今回は、タイトルの通り、「スクロールの途中で任意の要素の位置を固定/解除する機能」を試すことにしました。指定した要素が画面上のある位置までスクロールされると動きが止まるといった機能です。実装方法を紹介します。 まず最初に今回の投稿の記事部分の上と下に「#top-bar」、「#bottom-bar」という2つのバーが設置されているのがわかると思います。 「#top-bar」と「#bottom-bar」の2つのバー「#top-bar」は、「ヘッダーバー」の下まで画面がスクロールされると、その場所で位置が固定され、動かなくなります。 「#bottom-bar」は、逆に最初の表示では「フッターバー」の
デモページ：一番下までスクロール 「Hachi, stay!」ボタンをクリックすると、復活します。 ハチ公の使い方 実装は非常に簡単で、複数の要素にハチ公を適用することもできます。 Step 1: 外部ファイル 「jqeury.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.hachiko.1.0.0.min.js"></script> Step 2: HTML HTMLは通常通りに実装し、ハチ公を適用するエレメントがスクリプトで指定できるようにidなどを付与します。 例：id=sticky <div id="sticky">Click me to see how the state i
スクロール位置に応じて画面内に固定されたりされなくなったり、そんな要素を Sticky 要素と呼んだりします。スクロールをトリガーに CSS の position プロパティを切り替えて実装するのが一般的なやり方と思いますが、iOS の Mobile Safari だけはスクロールを一度止めるまで position の変更が反映されない現象が起こります。 文字で説明しても全く分からない気がしていますので、次の画像を御覧ください。 こんな感じで一度スクロールをやめるまで、position: fixed に切り替わって上部に固定されるはずのその要素はまるで応答無く画面外へと消えていきます。メニューを使った例ですが、メニューでなくとも同様です。これは PC ブラウザや Android 端末では発生せず、スクロールイベントの実行頻度を下げたり、Passive Event Listeners を用い
twitter facebook hatena google pocket 最近のサイトでよく見るのが、スクロールしていくと途中で要素が固定されるやつ。 印象的で、かつ残したい要素が訴求できる手段です。 jQueryを使うと簡単に実現でき、また複数の要素を代わる代わる固定させられます。 via：Persistent Headers | CSS-Tricks sponsors 使用方法 jQueryからjquery.jsをダウンロード。 それを読み込んで下記のように記述していきます。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> function UpdateTableHeaders() { $(".class名1").each(functi
久しぶりのプログラム関連のエントリーです。 表題の「サイドメニューを一定範囲で固定表示」って意味通じますでしょうか？ 画面スクロール時、サイドメニューが上部に流れきって消えてしまわないように途中から position:fixed で位置固定して、フッターにかぶる位置にきたら位置固定を解除するＵＩのことです。あの有名な LIG さんや痛いニュースでも採用されてるデザインです。 このちょくちょく見かけるＵＩのかゆいとこを解消した jQuery プラグインを紹介します。 一定範囲固定メニューのかゆいとこ 個人的意見ですが、よく見かける一定範囲固定メニューで感じるかゆいとこは以下２点です。 レスポンシブに対応してない 上部方向にスクロールした場合、位置固定がなかなか解除されない まず１の「レスポンシブに対応してない」についてですが、レスポンシブに対応してるやつを見たことがありません。実はスマホ持っ
ShiraNai7/jquery-scrollfix GitHub 画面から外れた際に要素をfixed固定できる「jquery-scrollfix」。 特定要素がスクロールによって画面上から外れた場合に固定位置に表示できます。ナビゲーション等に活用できそうです。 関連エントリ スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 固定要素をスクロール位置によって切り替えられる「Midnight.js」 レスポンシブな固定ナビゲーション「Responsive & Fixed One Page Nav」 ページトップに固定したアラートを表示できる「jquery-sticky-alert」
グローバルメニューなどをスクロール途中で固定する方法 | blog – NOBORU HIRABAYASHI
グローバルメニューなどをスクロール途中で固定する方法。 デモ：グローバルメニューなどをスクロール途中で固定する方法 ポイント このデモではJQueryを使用 最初にnavエリアのY軸座標を取得 navのY座標分スクロールが進んだらnavにposition:fixed;を突っ込む 戻ってきてY座標よりスクロール幅が減ったらposition:staticを突っ込み戻す javascript部分は以下の通り $(function(){ var nav = $('#nav_global'), navAfter = nav.next(), navHeight = nav.height(); var navY = nav.offset().top; $(window).scroll(function(){ var windowTop = $(window).scrollTop(); if(navY <
管理者向け画面などで、画面下部にコマンドボタンを配置した際、画面に表示するデータ量が多いとコマンドボタンが画面の表示枠内に収まらず不便に・・・かと言って position:fixed で固定表示すると、データ量が少ない場合に不格好に見えてしまう・・・そんな経験は無いでしょうか？ Fitbar は、ツールバーやナビゲーションメニューを画面のスクロール位置に応じ上部又は下部に固定表示させることができる jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。 Fitbar の使い方 jQuery、Fitbar（または jQuery Sitekit）の CSS, JS ファイルを読み込みます。 <link href="jquery.fitbar.css" rel="stylesheet" type="te
まずは、画像をご覧ください。私のサイトをテーマ tw_corp で表示させたものですが、１枚目がページトップが表示されており、グローバルメニューはヘッダー画像の下に表示されています。 そして、２枚目が少しスクロールさせたところ・・・グローバルメニューがブラウザ表示の一番上に固定されています。 これ、グローバルメニューをヘッダー画像の下などに配置しておき、下にスクロールしてメニュー部分がトップに来たらそこに固定される。最近、私が作っているテーマで良く利用している方法です。 デザインとして考えると、メニュー位置をブラウザ表示画面の一番上ではなく、真ん中とかに配置したいこともありますよね？ だけど、普通だったらスクロールするとメニューが見えなくなってしまいます。 そんなことを考えてると、javascriptを使うとスクロールしてトップ位置に来たらそこで位置を固定する方法を見つけて、応用することに
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでスクロールすると上部に固定されるナビゲーション
スクロール途中から位置が固定されるナビゲーションを作ってみる
【 jQuery 】ページのスクロール途中で指定要素の位置を「固定 / 解除」する方法
[JS]複数のエレメントをスクロールしても指定した場所に留まらせるスクリプト -ハチ公
iOS の Safari で Sticky (スクロール固定) 要素がカタカタしてお困りの時は | WP-E (仮)
jQueryで要素がページの一番上まできたら位置を固定する
レスポンシブ対応でサイドメニューを一定範囲で固定表示する jQuery プラグイン | CYOKODOG
画面から外れた際に要素をfixed固定できる「jquery-scrollfix」:phpspot開発日誌
ツールバーをスクロール位置に応じ画面の上下にピタっと固定表示する jQuery プラグイン | CYOKODOG
スクロールしたらメニューバーがトップに固定される方法 - Qiita