jQueryでスクロールすれば現れるコンテンツ

サイドスペースを有効活用する為に、
スクロール時に現れるウィジェットコンテンツを表示する方法。

Bloggerでは、
公開ファイルを読み込むことによってjQueryを使えるようになります。

既に、
BLOGGERでブログトップまで移動できるアイコンを表示する方法においても
jQueryは導入済みですが、
（このページ（記事）をはじめて見られた方もいらっしゃると思うので記載します。）
　


まずはHTML編集で、
以下を
</head>の上に挿入。

<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script>

そして、
挿入した箇所の下に、以下jQueryコードを追記します。

<script>$(function(){  $("#fixed-box").hide();  $(function () {    $(window).scroll(function () {      if ($(this).scrollTop() > 1000) {        $('#fixed-box').slideDown(100);      } else {        $('#fixed-box').slideUp(100);      }    });  });});</script>

scrollTop() > 1000

の数字ですが､

ウィジェットが現れる位置を指定する数字です｡

数字が大きくなれば､

表示されるのにその位置までスクロールしないと表示されません｡

逆に数字が小さければ、

表示されるのに比較的スクロールしなくても表示されるということになります。

なので、

サイドバーにある空白スペースが現れるまでのスクロール幅（px）で、

指定すればいいことになります。

（Chromeの要素検証を使うとわかりやすいです。）

あとは、

以下のCSSを追記します。

#fixed-box{
position: fixed;
top: 10px;
z-index: 0;
}

.footer-outer
 {
position: relative;
z-index: 1;
background-color: #FCFCFC;

}

そして管理画面より、
レイアウト＞ガジェットを追加＞HTML/JavaScriptを選択して､
表示したいjava/HTMLタグを以下のタグで囲みます｡
タイトル入れなくても大丈夫です｡

<div id='fixed-box'>
（ここに挿入）
</div>

参考サイト
→スペースを有効に、jQueryでスクロールすれば現れるコンテンツ

loading..