html - 誰かが2列のレイアウトで静的サイドバーを作成するのを手伝ってもらえますか

Question

ユーザーがスクロールを開始したときに、この右側のサイドバーを静的にするのを手伝ってください。レスポンシブタイプのウェブデザインは初めてです。「position：fixed」プロパティを使用しようとしましたが、レスポンシブデザインでの実現可能性がわかりません。私を助けてください。これはリンクhttp://the-bootstrap.obenland.it/page-with-comments/です

Answer 1

あなたのための JSfiddle --あなたのための JSfiddle

このようなクラスを作成します:-

.fixed {

          position:fixed;
          right:88px; /*insert this aswell*/
       }

そして、以下のようにサイドバーセクションで使用します。

<section role="complementary" class="widget-area span4 fixed" id="secondary">

Answer 2

レスポンシブ Web デザインの原則を維持したい場合は、単純に position:fixed を適用するだけではうまくいきません。小さい画面でうまく動作させるには、条件付きコードが必要です。「通常の」画面で修正する必要があり、画面が「小さすぎる」場合はクラスを削除する必要があります。また、「通常」と「小さすぎる」が何を意味するのかを判断する必要があります。例については、ここを参照してください。

http://home.edgemontgeek.com/dev/stackoverflow/14919523/

画面の高さも制御する必要があることに注意してください。ウィンドウが固定コンテンツを収めるのに十分な大きさでない場合、ユーザーはそれを見ることができません。別々にスクロールできる 2 つの列を持つことを検討できます。

Answer 3

使用する

.fixed{
left:0;
position:fixed;
top:Height_of_logo;
}

これにより、上部にロゴ用のスペースを残すサイドバーが作成されますが、ユーザーが下にスクロールしたときにサイドバーをスライドさせ、ロゴが範囲外になったときに固定したい場合は、このような Jquery プラグインを使用することをお勧めします

http://viget.com/inspire/jquery-stick-em

このサイトには、デモとともに非常に優れたドキュメントがあります。