menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/03/18
  • JQuery

スクロールしてもついてくる。「jQuery Scroll Follow」

ページが縦長になるとメニューやグローバルナビが見えなくなってしまいます。 固定表示したい場合 position fixed で対応することもできますが、jquery.scrollfollowを使えば少し動きのある感じで設定できます。
jquery

使用方法

準備するファイル

・jquery.js
・jquery.scrollfollow.js

外部ファイルの読み込み

最新のJQueryファイルでは動かないので気をつけて下さい。(今回は1.7.2で動きました。)

JavaScript

スクロールさせたい要素「#follow」を指定。

HTML

スクロールさせたいコンテンツを以下のように囲みます。

Stylesheet

CSSで要素に「position: relative」を設定。

「position fixed」でも簡単にできますが、「jQuery Scroll Follow」だと少し動きがつくのでサイトのイメージに合わせて使用してください。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11