menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/06/13
  • JQuery

スクロールしても長さによって上下に固定されるサイドバーの設定方法

ページをスクロールするとサイドエリアが空白になってしまう場合、サイドバーが画面上部下部に固定されるコードです。この手のコードはたくさんありますがその中でも上部、下部両方に対応している秀逸なものがあったので紹介いたします。
js

使用方法

準備するファイル

・jquery.js

外部ファイルの読み込み

head内へ以下を追加します。

JavaScript

JSは外部ファイル読込、htmlに記述、どちらでもいいですが、外部から読み込むのがよいでしょう。

HTML

「#main」にメインコンテンツ「#sideWrap」要素の中に「#side」要素 を入れその中にコンテンツを記述する。

CSS

コンテンツの幅、高さは好みで設定してください。

その他

今回はこちらのサイトに掲載されていた方法をご紹介しました。
参考サイト
サイドメニューが下まで行ったらそこで固定するJS(jQuery)

サイドバーには非常にアピールしたい情報を掲載していると思いますので、とても便利なコードだと思います。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11