ネットコンテンツ全般から日々のお役立ち情報まで分かりやすくお届け | ふかふか交易所

ふかふか交易所

HP・ブログ関連

ページのスクロールに合わせて付いてくるサイドバーを実装する方法

投稿日:

色々なホームページでよく見かける、"ページのスクロールに合わせて付いてくるサイドバー" を実装する方法について紹介します!(Ggoogle Chrome, IE11動作確認)

具体的にどんな感じになるかについては、PC表示にしてこのページのサイドバーに注目しながらページを下の方に スクロールしてみてください。 スクロールすると、それに合わせて一緒についてくると思います。

① Jqueryプラグインのダウンロード

この機能を実装するためにはJqueryの「Sticky」というプラグインを導入する必要があります。手順自体はとても簡単 なのでご安心を!

「Jquery Sticky」のダウンロードサイト(←クリックで移動)に入り、 黄色の「Download Plugin」というボタンを押して、「garand-sticky-1.0.1-18-g48d4464.zip」というフォルダをダウンロードしてください。

ダウンロードした.zipを開いていくと、「jquery.sticky.js」というファイルがあるので、 このファイルのみをホームページのディレクトリに配置しておいてください。これがプラグイン本体となります。

② プラグインの呼び出し(HTML記述)

次はダウンロードしたプラグインを呼び出す行を追加します。

この機能を実装したいページのHTMLを開き、<head></head>内に以下の行を追加してください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.sticky.js"></script>
<script>
$(window).load(function(){
$("#sticker").sticky({ topSpacing: 30, center:true, className:"hey" });
});
</script>

※ 2行目は自身が「jquery.sticky.js」を置いた場所のパスを選択してください。

そしたら最後に、動かしたいサイドバーの部分を<div></div>で囲み、
↑のコードの青色部分同じ属性を付与してください。

例:

※ このとき、属性の名前は "sticker" でなくても構いません。また、id属性でなくclass属性を与えたい場合は、 <head>内のコードの"#sticker"を".sticker"に変更すればOKです。

 

以上で導入手順は終了です。プラグインをサーバーにアップロードし、きちんと付いてくるようになっているかを 確認してみてください

これはサイドのスペースが空いてしまった時なんかに便利ですね!ただしあまり使いすぎると 鬱陶しく思われてしまうかもしれないのでご注意を!!

-HP・ブログ関連
-, , , ,

Copyright© ふかふか交易所 , 2019 All Rights Reserved.