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

関連記事

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

tableデータから棒グラフを描画できるjQueryプラグインTableBarChartを使ってみる

グラフを作成することについて 既存のtableデータから簡単に棒グラフの作成できるTableBar

記事を読む

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

ニコニコ動画やYoutubeのRSSフィードもサムネ付きで手軽に表示できるブログパーツ

通常サイトのRSSだけでなく、ニコニコ動画やYoutubeの動画サイトのRSSを読み込んでサムネ画像

記事を読む

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

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

記事を読む

Pocketのソーシャルボタンをブログ・サイトに設置する方法

後で読みたい記事を保存することのできるPocketのソーシャルボタンの設置方法についてです。このボタ

記事を読む

お名前.comのでサブドメインを取得してロリポップで使う方法

タイトルどおりなのですがお名前.comで取得した独自ドメインからサブドメインを取得し、ロリポップで使

記事を読む

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

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

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

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

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

記事を読む

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

OpenCV3.1のTracking APIでトラッキングを試す

はじめに 先日OpenCV3.1をopencv_contrib付きで

パソコンを複数台使う際便利なツール

はじめに 先日、機械学習用にGPUを積んだBTOパソコンを購入しまし

→もっと見る

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