RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.1 ~ No.10 > 記事No.6

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

← 前の記事

次の記事 →

Jquery Sticky

色々なホームページでよく見かける、"ページのスクロールに合わせて付いてくるサイドバー" を実装する方法について紹介します!(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>内に以下の行を追加してください。

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


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

例:

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


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


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

関連記事はこちら


  ■ 一言コメントをどうぞ!(100字まで)


過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ