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，您必须将对象的属性设置为、或。bottomleftdisplayabsoluterelativefixed

无论哪种方式，通过设置position: fixed;滚动时它都不会移动。

于 2013-03-22T08:27:32.743 回答