3

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

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

静的レイアウトの場合と比べて、サイドバーがまったく同じ場所にある場所でWebサイトを動作させようとしています。コンテンツ列の右側にあり、ヘッダーdivの下とフッターdivの上にあり、ウィンドウを水平方向に縮小すると、コンテンツ列の上に移動しません。

私はグーグルジェネリックCSS固定位置などを試しましたが、実際に機能しているものを見つけることができなかったので、ここで質問することになります。私はこれをcssまたはjavascriptのいずれかで処理する方法を探しています。それがjavascriptルートに進む場合は、ベースとしてJQueryを最も好むでしょう。

編集私はアルシアックブラウザをサポートする必要はありませんが、それが私のページを台無しにせず、許容できるほど劣化しない限り（ページの反対側に配置されていないように）、ie6で完全に機能するかどうかは気にしませんまたは私のヘッダーまたはコンテンツの上に）

4

2 に答える 2

11

結局、私はここに来て投稿する前に始めた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>

これは私のサイドバーのすてきなきれいなスクロール効果を生み出します、私の意見での緩和はそれが本当に洗練されていると感じるのを助けるものです。

于 2009-08-24T13:04:55.067 に答える
2

高さを賢く拡大してページ全体にスクロールバーを表示するのではなく、コンテンツをコンテンツとともにスクロールさせてみてください。そうすれば、コンテンツの大きさに関係なくレイアウトは同じままになり、コンテンツセクションにはスクロールバーが表示されます

#content {
   overflow:auto;
}

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

于 2009-08-21T18:05:12.153 に答える