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

関連記事

zipimage

さくらサーバーにフォルダをアップロードする方法

さくらサーバーにフォルダをアップロードする…という機能は無いみたいで個別にFTPソフトを使う必要があ

記事を読む

RSS-Icon-Image

AmazonのランキングRSSから画像リンクを作る

Amazon RSS Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らし

記事を読む

jquery-icon

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

application-javascript

【javascript】正規表現文字抽出簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

404NotFound

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

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

記事を読む

capturefullpageimg1

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

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

記事を読む

Youtube-Image

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

61m2fdbtoTL._AA180_

ニコニコ動画の検索APIについて調べたのでメモ

ニコニコ動画にはAPIがあり、動画の情報(タイトルとか再生数とか)を取得したり、ランキング情報(RS

記事を読む

mouseimage

【jQuery】クリックイベントでマウスホイールクリックを検知する

$("a").click(function(){ … }); によりクリックイベントを関連付け

記事を読む

PAK12_10naname500-thumb-500xauto-3071

さくらとロリポップのcronについての比較

私は今さくらのレンタルサーバーとロリポップのレンタルサーバーを両方試してみているのですがそのcron

記事を読む

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

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

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

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

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

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

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

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

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

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

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

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

TAKEBE055122558_TP_V
寝る前にスマホを見ると斜視になる可能性とその対策

はじめに  寝る前などスマホを横になりながら見続けると斜視になる可能

→もっと見る

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