当サイトでのやり方は以下の注意点があります。
注意点
1.スクロールを固定させるのは最下部のガジェット1個だけ2.Googleアドセンスを固定させると規約違反になるらしい
以下のサイトを参考にやりましたが、そのままでは動かなかったりしたので若干手を加えております。
| ＜参考サイト＞ 【Bloggerカスタマイズ】サイドバーを固定してスクロール追従広告を設置する方法（jQueryを利用） http://super462.com/blogger-sidebar-scroll-kotei-jquery-1372 【jQuery】スクロール時に指定位置で要素を固定させるscrollfix.js http://wild-cards.net/jquery-scrollfix/ |
HTMLの編集では以下2点を実行
1.<head>と</head>の間に以下を追加
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js' type='text/javascript'/> |
※これは「[Blogger] 関連記事を記事の下に配置する」と共用となる。
2.</body>の直前に以下を追加
| <script type='text/javascript'> jQuery(function($) { var nav = $('#PopularPosts1'),//固定したい要素名 offset = nav.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top + 180) { nav.addClass('fixed'); } else { nav.removeClass('fixed'); } }); }); </script> |
「PopularPosts1」が画面のある位置に来たら「fixed」というclassを追加させる。それ以外はclass属性を削除する。
-配置させたガジェットの種類や数によってトップの位置にズレが生じてしまい、固定させたいガジェットがいきなり飛んで固定されたり不自然な動きをする場合は、上記offset.topの後の「+ 180」の数値をいじって固定させるタイミングを調整する事も出来る。「- 10」等-にも変更可。
上記のコード中の固定したい要素名の「PopularPosts1」はHTMLの編集画面のウィジェットへ移動の一覧から取得しました。
CSSの追加で以下を追加
| /*ガジェットのスクロールの固定*/ .fixed{ position:fixed; top:0px;/*固定させたい位置*/ width:285px;/*サイドバーの横幅-45位でピッタリかも*/ } |
「top」・・・スクロールさせた時に画面上から何ピクセルの位置で固定させるかを指定
「width」・・・サイドバーの幅に合わせて調度よく改行するように指定。指定しないと右にはみ出てしまう。
以上でスクロールしても指定したガジェットが常に表示されるようになりました。
