ビジネスは情熱とアイデア!

ネットを活用して生活を変えていきます。 いろいろな知恵を紹介しながら、自分も実践します。
ビジネスは情熱とアイデア! TOP  >  ニュース術 >  RSS配信:[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト_-ScrollUpBar

RSS配信:[JS]ヘッダやナビゲーションなどを下にスクロールした時には隠し、上にした時に表示するスクリプト_-ScrollUpBar

参った!!あまりにも完璧なRSS受信。コリス.jpからのRSSフィードをGmail を使ってFC2ブログに送ってみたらこんなことになった。コリスが全文をRSSのdescriptionに吐き出しているのでこんなことになってしまった。しただけ見るとまるで自分のコンテンツのようだ。これではさすがにまずいので、どうにかしなければならない。

YahooPipesで文字数を加工するするしかないだろうか。

たびたび申し上げておりますとおり、当ブログは現在実験中です。

この夏になんとかカタチを作りたいと必死です。

いい歳をして馬鹿みたいですが、情熱なんてそんなものです。その火が消えるまではしつこくやり続けます。





ヘッダやナビゲーションなど、ページの上部に配置したパネル状のバーを下にスクロールした時には隠し、上にスクロールした時にそのバーを表示するjQueryのプラグインを紹介します。


デスクトップでコンテンツに集中させる効果だけでなく、スマホやタブレットなどの小さい画面でスペースを有効に利用することができます。


サイトのキャプチャ

ScrollUpBar -GitHub



<ul class="mT3em listStyleAchor">
<li>ScrollUpBarのデモ</li>
<li>ScrollUpBarの使い方</li>
</ul><h2 id="h201">ScrollUpBarのデモ</h2>

デモはChrome, Safari, Firefox, Opera, IEなどのデスクトップ用のブラウザをはじめ、タブレット、スマホでご覧ください。


デモのキャプチャ

デモページ


下にスクロールしてみます。


デモのキャプチャ

デモページ:下にスクロール


下にスクロールすると、上部のバーは通常通り上へ消えていきます。で、どの地点からでも上にスクロールすると上部のバーが表示されます。


デモのキャプチャ

デモページ:上にスクロール


スクロール時に表示させるバーはoffsetTopにも対応しており、最上部のヘッダは通常通りで、その下のバーだけ表示させることもできます。


デモのキャプチャ

デモ:offsetTop


このデモでは、ブラックの「Top Bar」だけがスクロールで表示されます。


<h2 id="h202">ScrollUpBarの使い方</h2>

実装は非常に簡単で、既存のページでも簡単に加えることができると思います。


<h3 class="mT3em">Step 1: 外部ファイル</h3>

当スクリプトとjquery.jsを外部ファイルとして記述します。


[html]




...






[/html]
<h3 class="mT3em">Step 2: HTML</h3>

スクロールで表示・非表示させるバーは、静的に配置させる箇所に記述し、「position: absolute;」を加えます。


[html]


Top bar

[/html]


「デモ:offsetTop」のようにバーの上にヘッダを配置する時は、下記のようになります。


[html]



Top bar with offset top

...

コンテンツ




[/html]
<h3 class="mT3em">Step 3: JavaScript</h3>

あとは、jQueryのセレクタでバーを指定し、スクリプトを実行するだけです。


[javascript]

//<![CDATA[
$('#topbar').scrollupbar();
//]]>


[/javascript]





from コリス http://bit.ly/UJwqQh

via IFTTT
スポンサーサイト
[ 2014年07月30日 09:54 ] カテゴリ:ニュース術 | TB(-) | CM(-)
Google Adsense






【からだを守ってキレイになろう!】プラチナ級の価値がある特別な乳酸菌「EF2001」


1兆個の乳酸菌を凝縮!健康なからだ作りのための高機能乳酸菌サプリメント

便利なおすすめツールズ
nobiru

[受験]大学受験の最新情報をお届け。
まだ間に合う大学入試情報は毎年注目されています。 
http://www.nobiru.net/


ADs
インターネットで活動する人のマネタイズは今後の大きなトレンドになります。
Kindle版のランキング上位
-----------


ブックオフオンライン
とりあえず部屋を整理してついでに稼ぎたい時は↑↑一石二鳥。
ソーシャル系ニュースブログ『蛙の目』
検索フォーム
QRコード
QRコード
楽天トラベル
プロフィール

ブラックコーヒー

Author:ブラックコーヒー
このブログの管理人の森田達也(ブラックコーヒー)です。JAZZとコーヒーと本とカメラをこよなく愛しています。考えることが大好き。
元々は理系(農)。
現在の仕事は広報プランナー。
昔はソフト会社(桐のベンダー)をやってました。職場は学校です。

月別アーカイブ