【jQuery】サイドバー固定に役立つサイト集

公開日: : 最終更新日:2014/08/14 JavaScript/jQuery, サイト制作

スポンサーリンク

縦スクロール

縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させていただきます。

[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
http://ozpa-h4.com/2012/11/20/jquery-window-scroll-position-fixed/

スクロール時に表示位置を固定するjQueryプラグイン『FixedScroll』を作成しました
http://nemousucom.hatenablog.com/entry/2012/12/06/093615

スクロール途中から位置が固定されるナビゲーションを作ってみる
http://unformedbuilding.com/articles/fixed-nav-with-jquery/

jQueryでフッターに重ならずに「空いた領域をフルに使い切る追尾型サイドバー」を実装する方法
http://blog.quusookagaku.com/wordpress/12799/

画面をスクロールした時、ページ途中にあるサイドバーがスクロールせず止まってる(固定する)方法
http://www.geocities.jp/eijispace/2013/1018.html

縦スクロールと横スクロール

上記のものは縦スクロールを考慮したものですが、横スクロールも考慮したいという場合もあると思います。横スクロールを考慮しないと本文とサイドバーが重なってしまいメインコンテンツが見えなくなってしまうという場合があります。

サイド固定
↑ブラウザサイズが大きい場合は重ならない

サイド固定
↑ブラウザサイズが小さいとき横スクロールで移動させるとメインコンテンツと重なる

この場合は左サイドを固定していますが、右サイドの場合は横スクロールした分だけ同じく右側に移動します。もちろんわざとやっているということもあるのでこの辺は好みになってくると思います。大手サイトでもこちらを採用しているものも見かけるので別に悪いというわけではないです。

ライブドアみたいにスクロールしたらサイドバーの広告を固定する
http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder

コピペでOK!サイドバーの広告を固定してスクロールに追従させる方法
http://e1116.blog.fc2.com/blog-entry-40.html

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

ニコニコ動画の外部プレイヤーを動的に設置する【javascript/jQuery】

ニコニコ動画の外部プレイヤーはページのはじめの読み込みのときにしか表示されず、javascriptで

記事を読む

関連記事を手軽に表示できるzenbackの導入方法

関連記事を手軽に表示できるZenbackというサービスの紹介です。 関連記事の表示を手助けして

記事を読む

【jQuery UI】タブの初期状態を選択するとエラーがでて失敗する

jQuery UIでタブをプログラム側から選択させるには以下のようなコードを書けばいい…といったこと

記事を読む

指定URLのWebサイトの画面全体をキャプチャする方法

Webサイトのスクリーンショットを撮る方法としてはいくつかありますが、各方法ごとに調べたものを紹介し

記事を読む

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

関連記事を表示させるブログパーツOutbrainの導入方法

関連記事を表示させるブログパーツOutbrainの紹介です。 このOutbrainの長所は

記事を読む

【javascript】RGB⇔カラーコード変換ライブラリ

RGBをカラーコードに変換、または、カラーコードをRGBに変換したい場合が出てきたのでどういうも

記事を読む

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

jThree.jsやThree.jsでcanvasの画面をキャプチャして画像にする方法

WebGLのライブラリであるThree.jsやそのラッパーライブラリのjThree.jsでcanva

記事を読む

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

【PHP】headerでContent-Typeを指定したのに効かない場合の対処法

PHPでサイトマップを作ろうと思い、XML形式のファイルを出力しようと

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。

【PHP】特定のURLからそのAtomやRSSのフィードを抽出する方法

特定のURLからRSSやATOMのフィードを抽出する方法をメモ。 流

フィード抽出ツール(RSS1.0、RSS2.0、atom)

任意URL サイト名 サイトURL RSS1.0

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑