最近、ブロガーの事ばかり書いているワタクシ。
こんなのが目的だったっけ？と少し悩んでますが、
自身の記録的な事が誰かのお役にたてばと超偽善的に書いています。
サイドバーを追尾させる方法
サイドバーが追っかけてスライドしてくるアレ。やりたい人もいるのでしょうが、ワードプレスみたいにプラグインの無いBloggerでは分からないって人いるのかな？
BloggerではテンプレートのHTML編集から可能ですよ。
まずは<head></head>の編集
jQueryの導入が必要ですの、<head></head>内に
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'/>
を書き込みます。
これは2014/4時点では最新だった気がしますが、
更新されてたら新しいのに書き換えると良いかもです。
サイトはコチラ>>http://jquery.com/
ここのダウンロードってトコロに入ると最新のコードが出てますので、
コピペでペーストです。
完了したら次は
<script type='text/javascript'>
jQuery(function($) {
var nav = $('#scroll'),
offset = nav.offset();
$(window).scroll(function () {
if($(window).scrollTop() > offset.top - 10) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
});
</script>
をその下あたりに書き込みます。
本当は<body>内のが良いんだっけなー？
と思いながら面倒で<head>内に書いても動いてたので、そのまま放置してますw
ちなみにですが、offset.top - 10)の部分は、スクロールさせてどの位で追尾が始めるかの指定です。
数字をを変えたり-を₊にすると変わりますよ。
次はCSS
スライドさせる部分のCSSの記述をします。
.fixed {
position: fixed;
top: 20px;
20pxの数字を変えるとやはりいる場所が変わります。
僕、.fixedの前にもクラスを追加していますが、そのままでも動くはず。
いよいよスライド部分導入。
ブロガーの場合、レイアウトからHTML/JavaScriptを選択して再度バーに追加します。
当然一番下が良いかと。他のに被りますので。
そして編集画面に<div id="scroll">スライドさせたいタグ</div>を入れて、完了です。
確かこれで出来たはずですよ。
ちなみに、<head>内を触れるブログサイトなら同じ方法でスライドさせられると思います。
ではでは
はじめまして。
返信削除こちらのTips、非常に参考になりました。
https://audi-importcar.blogspot.jp/
にて実装しております。
ありがとうございました。