Scroll To Top Then Fixed Navigation Effect With jQuery and CSS

JavaScript

スクロールすると上部にナビゲーションが固定される「Scroll To Top Then Fixed Navigation Effect With jQuery and CSS」

Scroll To Top Then Fixed Navigation Effect With jQuery and CSSは、スクロールすることでナビゲーションが上部に固定される機能を実装することができます。jQueryとCSSが使われています。

Scroll To Top Then Fixed Navigation Effect With jQuery and CSS

デモ

デモページを読み込むと、最初は画面下部にナビゲーションが表示されていますが、下へスクロールしていくと、それと同時にナビゲーションが上がってきます。その後、一番上まで上がるとそこでナビゲーションが固定されるという仕組みです。

上部にナビゲーションが固定されることで、いつでも好きなときに手軽に各メニューへアクセスできるのでユーザーにとっては便利ですね。

使い方に関してもシンプルでとてもわかりやすいと思います。

というわけで、下へスクロールすることでナビゲーションが上部に固定される機能を実装したいという方は、ぜひScroll To Top Then Fixed Navigation Effect With jQuery and CSSを活用されてみてはいかがでしょうか?

Scroll To Top Then Fixed Navigation Effect With jQuery and CSS

Text Scramble Effectテキストをスクランブルしながら表示していく「Text Scramble Effect」前のページ

レスポンシブに対応した垂直タイムライン「Building a Vertical Timeline With CSS and a Touch of JavaScript」次のページBuilding a Vertical Timeline With CSS and a Touch of JavaScript

関連記事

  1. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  2. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

  3. no-image

    JavaScript

    リッチキャプションを備えたイメージビューア「CaptionBox」

    CaptionBoxは、リッチキャプションを備えた美しいイメージビュー…

  4. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  5. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  6. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP