WebサイトレイアウトのCSSまたはjQuery固定サイドバー

StackOverflow https://stackoverflow.com/questions/1313365

  •  19-09-2019
  •  | 
  •  

質問

私のウェブサイトはこのようなコンテンツ構造でセットアップされています

<body>
    <div id="header></div>
    <div id="contentwrapper">
        <div id="content>
        ...
        </div>
        <div id="sidebar">
        ...
        </div>
    </div>
    <div id="footer"></div>
</body>

私は、サイドバーが私の静的レイアウト内の場所と比較してまったく同じ場所にとどまる場所に私のウェブサイトを動かしようとしています。コンテンツ列の右側にあること、ヘッダーdivの下とフッターdivの上にあり、コンテンツ列の上に動かないウィンドウを水平に縮小すると。

Google Generic CSSの固定位置などを試してみましたが、本当に私と一緒に働いているものを見つけることができなかったので、ここで尋ねるようになりました。私はこれをCSSまたはJavaScriptのいずれかで処理する方法を探しています。それがJavaScriptルートに行く場合、私はjQueryをベースとして最も好むでしょう。

編集 Archiac Browsersをサポートする必要はありませんが、ページを台無しにせずに容認できる限りIE6で完全に機能するかどうかは気にしません（ページの間違った側に座っていないように、または上に私のヘッダーまたはコンテンツ）

役に立ちましたか？

解決

結局、私はJavaScriptソリューションを持って行きました。

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').css('top', $(this).scrollTop() + "px");
    });
</script>

それは仕事をし、私が望んでいた結果を生み出しましたが、それが非常にぎくしゃくしていて、見るのが不快だったので、それが達成した効果に非常に不足していました。

今日はもう少しグーグルで行って、この投稿に出会いました。 jQueryを使用した上部フローティングメッセージボックス. 。それが私をここに導きます

<script type="text/javascript">
    $(window).scroll(function() {
        $('#sidebarPage1').animate({ top: $(window).scrollTop() + "px" }, 
            { queue: false, duration: 500, easing: 'easeInOutSine' });
    });
</script>

私のサイドバーのきれいなスクロール効果を生み出します。私の意見では、緩和は洗練された気分になるのに役立つものです。

他のヒント

高さを拡張し、ページ全体にスクロールバーを引き起こすのではなく、コンテンツをコンテンツでSublollでスクロールしてみてください。そうすれば、コンテンツの大きさに関係なくレイアウトが同じままであり、コンテンツセクションはスクロールバーを取得します

#content {
   overflow:auto;
}

それはあなたのために働くはずです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top