2014　1231
シリウス外部カスタマイズテーマ　スクロール追従ボタン画像の設置

 

大手サイトなどでたまに見かけるサイトをスクロールしても
スクロールと同スピードで下に動くボタン画像みたいなもの

 

ダウンロードサイトや　一押しを進めるうえで

 

これ押せおばかりに　興味を引くものです

 

 

一例としてはこんなスタイル

 

すみません
これは画像で動かないのです

 

当サイトはプレグインか何か反響しているため作動は出来ませんでしたが
他サイトではスムーズな動きが確認されております

 

作動はこちらの配布サイトSticky Pluginでご確認ください
http://stickyjs.com/

 

作動が確認できましたらプラグインをダウンロードしておきましょう

 

---

 

設定は難易そうですが　やってみれば然程面倒でもありません

 

ただし　今回の解説はサイト内に設定するまでとなります

 

サイト外に設置する手順は数日お待ちください

 

---

 

設置手順

 

配布サイトでSticky Pluginは段ロードしたとして進めます

 

解凍したファイルから以下の4つをサイトのあるフォルダーにアップロード

 

もう一つquery/1.4.2min.jsをアップロード

 

お持ち合わせのない方はこちらでダウンロード
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

 

 

---

 

ｈｔｍｌ記載

 

貼り付けコードをコピーしてｈｔｍｌテンプレートの
head に貼り付けますが　記事内に呼び出すＩＤと同じ記述に
しなければならない箇所がございます

 

siriusu　と記載しているところです

 

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$("#siriusu").sticky({topSpacing:0});
$("#buttons").sticky({topSpacing:70});
$("#authorinfo").sticky({topSpacing:160});
});
</script>

 

 

こちらが記事内に張り付けるコードですが
id=siriusuとしていますが　
好みのＩＤ名称にどちらも同じく書き換えてください

 

同じでないと動きません

 

画像コードを好みのものに入れ替えてください

 

<div style="height:1000px;">
<div id="siriusu">
<img src="<% pageDepth %>img/clipimage_79.jpg" alt="<% pageTitle %>" />
</div>

 

 

これで終了ですが　記事と画像が重なる　距離がある場合は
1000の数値を変えて調整します

 

 

ここまでは記事内での表示方法ですが
サイトのメインカラムの外で作動させる場合は　
以下ページの詳細をご覧ください
シリウスのサイト背景に追従型テキストやバナー設置するカスタマイズ

 

 

シリウスのプレビューではなぜか不作動でした

 

プラグインを入れ替えても変化なし

 

ご確認はアップロードして閲覧の履歴を削除しながら
確認してください

 

スポンサーリンク

 

 

 

 

スクロールに追従するクリック画像を設置するシリウスカスタマイズ
シリウスカスタマイズトップ