3

次のような状況があります。

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
    </head>
    <style>
        #wrapper { width: 1100px; margin: 0px auto; }
        #wrapper #stream { width: 790px; float: left; border: 1px solid red;  }
        #wrapper aside { width: 270px; float: left;  border: 1px solid red; }
    </style>
    <body>
        <section id="wrapper">
            <section id="stream">
                some text...
            </section>
            <aside>
                <ul>    
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                </ul>
            </aside>
        </section>
    </body>
</html>

ページが下にスクロールしてもサイドバーが動かないようにしたいです。

脇の位置を固定に設定してみましたが、左からの距離を適切に設定できません。

jQueryで解決策を見つけました：

$(document).ready(function () {
    $(window).scroll(function () {
        $("aside").css('top', $(window).scrollTop()+'px');
    });
})

しかし、Chrome と Safari では、脇のスクロールは断片的です。

何か助けはありますか？

========================

解決：

<!DOCTYPE HTML>
<html>
    <head>
        <title>test</title>
    </head>
    <style>
    #wrapper {

        width: 1100px;
        margin: 0px auto;
    }
    #stream {
      width: 800px;
      background: #ccc;
      float: left;
    }
    #sidebar {
    float: left;
      border: 1px solid red;
      width: 200px;
    }
    aside {
      position: fixed;
      top: 20px;
      border: 1px solid red;
    }
    </style>
    <body>
    <section id="wrapper">
        <section id="stream">
                some text...
        </section>
        <section id="sidebar">
          <aside>
                <ul>    
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                    <li>something</li>
                </ul>
          </aside>
        </section>
    </body>
</html>
4

1 に答える 1

1

top、right、bottomまたはプロパティを使用するにはleft、オブジェクトのdisplayプロパティをabsolute、relativeまたはに設定する必要がありますfixed。

いずれにせよ、設定position: fixed;することでスクロールしても動かなくなります。

于 2013-03-22T08:27:32.743 に答える