Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【js,jq】Qiitaにも実装されている"例の"便利なや~つ~『スクロール・ナビ.js』✨✨

ちょっと見つけにくかったけれど、探したらありましたよ~✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)✨♪♪

 

スクロールと同時に、ナビゲーションバー( もくじ )が出現し、その箇所になると対応部分がハイライトされる例のやつです。なんて呼べばいいか分かりません😅w

 [追記 : シンプルに『スクロールナビ』『スクロール・ナビゲーター』という呼称でいい気がしてきましたw🙌🌟 ]

 

近いうち、我がblogにも実装予定です ₍₍(꒪່౪̮꒪່)⁾⁾✨✨♪

 

 

Single Page Site with Smooth Scrolling, Highlighted Link, and Fixed Navigation (2013.04)

callmenick.com

Codropsさんとカラーやレイアウトが似ていますが、違う方ですw 僕と同じでcodropsさんを敬愛されておられる様子でした。

 

コードが非常にシンプルで理解しやすかったです。

 

たどり着くまでにちょっと時間かかりました::(っ`ω´c)::

どういうワードで検索すれば良いか分からず少し手こずりましたw 最終的に行き着いた検索ワードは…

『scrolling navbar highlight javascript』

これで、その辺りのコードを解説されているサイトさんいくつかヒットしました🌟

 

初出は2013年?辺りなのですかね。多分ですが。。

 

その他の「スクロール・ナビjs」のライブラリさん

Scrollspy -Bootstrap -

v4-alpha.getbootstrap.com

StickyNavbar.js

   http://www.jozefbutko.com/stickynavbar/

 

こちらは解説というよりは、jsライブラリになります。

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️