【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
  • このエントリーをはてなブックマークに追加

関連記事

ニコニコ動画のユーザーおよびマイリストのRSSフィード

ニコニコ動画のユーザーページのRSSフィードおよびマイリストのRSSフィードは次のようになっています

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

【jQuery UI】Sliderのオプション変更やイベントを取得をする方法

jQuery UIを使ってスライダー(トラックバー)を作ります。その際に起こるイベントとしてスライダ

記事を読む

javascriptで画像処理をする【HTML5】

HTML5でjavascriptを使って画像処理をしてみました。このページでは手始めにグレースケール

記事を読む

PEARをレンタルサーバーにインストールする

共用レンタルサーバーにPEARをインストールしたときにてこずったところについてメモ。今回レンタルサー

記事を読む

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

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

記事を読む

スクレイピングをサポートしてくれるAPI【kimono】

kimonoというスクレイピングをAPI化してくれるという素晴らしいサービスがあります。

記事を読む

人気記事表示ブログパーツの忍者レコメンドを使ってみる

忍者レコメンドとは 今回は忍者レコメンドという人気記事表示のブログパーツを紹介します。忍者レコメン

記事を読む

livedoorblogのタグのページが404 Not Found

別のブログとしてライブドアのものを使っているのですが、タグを編集していた際に特定のタグ一

記事を読む

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

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記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

格安プラン限定レンタルサーバー機能比較表(2016年)

はじめに  最近新しい共用サーバーをレンタルしようと思い調査およびそ

kindle unlimitedが便利だったのでお勧めの使い方など感想メモ

 kindle unlimitedというサービスが8/3からAmazo

→もっと見る

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