[B! ナビゲーション][スクロール] masakaz77のブックマーク

masakaz77 id:masakaz77

ナビゲーションとスクロールに関するmasakaz77のブックマーク (4)

スクロールに合わせてナビゲーションに現在地を明示するスクリプト・「Progress Nav」
Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの。この手のは同じように明示する方法ありますけど、この方法も悪くないと思ったので備忘録。 Progress Nav On Github
masakaz77 2017/01/31
ナビゲーション

スクロール
リンク
jQuery基礎講座：スクロール量に応じて出現するナビゲーションエリア(ZIP付) | 株式会社パナレア
東京都中野区を中心としたホームページ制作会社『PNRA CO.LTD.,』のブログ。日々の業務上での発見やアイディア、Tipsなどを随時更新していきます。jQuery基礎講座[第５回] どーも＠PNRAです！忘備録もかねて随時更新していくjQuery基礎講座の時間がやって参りました。前回のjQuery基礎講座：ハンバーガーナビゲーション実装サンプル（ZIP付）に引き続き、今回もナビゲーション周りをいじくっていきたいと思います。本日実装してみるのはタイトルの通り、スクロール量に応じて出現するナビゲーションエリアです。これは、スクロール量をjQueryで取得し、一定の深さまでスクロールするとコンテンツを表示させるというやつです。ナビゲーション以外にも「ページトップへ戻る」ボタンの出現などにもよく使われるものなので、是非覚えておきましょう。それでは、具体的にみていきましょう。実装実例
masakaz77 2016/02/15
スクロール

ナビゲーション

ヘッダー
リンク
スクロール位置によってサイドバーやナビゲーションを固定・解除する jQuery のシンプルな実装方法と注意点
ページをスクロールしていると、途中から要素が固定表示される動きをするサイトを時折見ます。ナビゲーションだったりサイドバーの目立たせたいところだったり、用途は様々。例えば、SaCSS の以前のスペシャルページでも利用していたように、ページ途中で出てくるナビゲーションが、画面の一番上に触れると固定されて以降ずっとついてくるような動きをする。 SaCSS WordBench Sapporo,Late2013 この実装はそれほど難しくなく、比較的簡単に実装できるのですが、諸所気にかけておいたほうが良い部分があったりする。シンプルな実装方法を紹介しつつ、注意点も書いておこうと思う。
masakaz77 2015/09/25
ナビゲーション

固定

スクロール
リンク
[JS]縦長ページに実用性とデザイン性を兼ね備えたスクロールメニューを設置するスクリプト -ScrollMenu
デフォルトのスクロールバーも表示ブラウザのデフォルトのスクロールバーを併用することも可能です。 ScrollMenuの使い方 Step 1: 外部ファイル当スタイルシート・スクリプト、jquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="scrollmenu.css"> </head> <body> ... コンテンツ ... <script src="jquery.js"></script> <script src="scrollmenu.js"></script> </body> Step 2: HTML 各コンテンツは、section要素で実装します。 <section class="section" id="section1"> <div class="content"
masakaz77 2015/05/29
スクロール

ナビゲーション

シングルページ
リンク
1