ページ上部にスクロールしても消えないお知らせエリアを表示する jQuery Sticky Alert

スクリーンショット_2014-08-15_18_40_09

jQuery Sticky Alertはページ上部に表示される、スクロールしても消えないお知らせエリアを実装できるjQueryプラグインです。

レスポンシブにも対応しています。

スポンサーリンク

デモ

黒い帯に白文字の「Download on GitHub!」の部分です。

デモ

実装方法

ソースはGitHubでダウンロードできます。

jQueryと一緒に読み込みます。

CSSも読み込みましょう。

<header>エリアなどでスクリプトを実行します。オプション値も指定します。

  • #alert-container:コンテンツを表示するエリアを指定します。
  • barFontcolor:文字色を指定します。
  • barColor:帯の色を指定します。
  • barFontSize:文字サイズを指定します。
  • barText:帯に表示するテキストです。
  • barTextLink:リンク先を指定します。
  • cookieRememberDays:右上のバツ印を押すとバーが消えます。一度バーを消したユーザーには、ブラウザにCookieを保存して、再度ページにアクセスしても一定期間バーを表示しないようにできます。その期間を指定できます。単位は◯日です。ページにアクセスする度に表示するには「0」日を指定します。

htmlに表示するエリアを追加します。

シンプルで良いですね!

スポンサーリンク
jQuery Sticky Alert – ページ上部にスクロールしても消えないお知らせエリアを表示する

みんなが見ている人気記事

コメントを投稿する

  • Posted on 2014.08.15
  • Views 229