【jQuery】シングルページでナビゲーションに現在地を表示する ｜ Tips Note by TAM
jQueryを使用して、シングルページでナビゲーションに現在地を表示するサンプルを作成しました。 デモページはこちらになります。 ■HTML ナビゲーション部分とコンテンツ部分のHTMLの抜粋です。 ページ内リンクで各コンテンツに遷移します。 <ul id="gnav"> <li><a href="#contents01">コンテンツA</a></li> <li><a href="#contents02">コンテンツB</a></li> <li><a href="#contents03">コンテンツC</a></li> <li><a href="#contents04">コンテンツD</a></li> </ul> ～略～ <div id="contents"> <div class="inner"> <div id="contents01"> <h2>コンテンツA</h2> コンテンツAの
[js]スクロール位置に応じてグローバルナビを点灯させる | begoingtoブログ
1ページで構成されていて、スクロール位置に応じてグローバルナビが点灯するようなサイトを最近よく見かけます。 自分もその仕組みを取り入れたかったので、勉強がてらデモサイトを作りました。 デモサイト 仕組み的には、都度スクロール位置をjsで取得し、点灯するグローバルメニューを判定しています。 1. CSSの調整 CSSに関しては細かい解説はしませんが、ヘッダー固定メニューの場合、下記のようなCSSを記述します。 ただし、position: fixed;は一部のスマホでは未対応のため、幅広くブラウザ対応する場合は別のやり方を考慮する必要があります。 #header { position: fixed; width: 100%; height: 50px; top: 0; text-align: center; background: rgba(180, 180, 180, 0.9); borde
ページ内ナビをコンテンツの位置によってカレント表示させる
パララックスをつかったサイトなど、縦長のページが昔に比べれば多くなった感じがしますがその際に、ページ内用のナビを設置する場合があると思います。スクロールした時そのコンテンツのエリアに来たら、ナビをカレント表示させるjsを調べて作ってみました。 参考にしたサイト 作ってみたと言いつつ、大部分が参考サイト通りなので先にご紹介いたします。 jQueryで長いページの区切り（セクション）ごとに背景を変化させる | webOpixel jQueryを使った長い縦スクロールページの現在地による制御 | 2GRAVITY カレント表示でaタグはそのまま とりあえずカレント表示されればOKのタイプ。カレントの箇所もクリックできます。 サンプルページ HTMLの抜粋は以下 <ul id="nav"> <li><a href="#section01">menu<a></li> <li><a href="#se
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
バスナビシステム
