Question

我有这样的情况：

<!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，旁边的卷轴是分段的。

任何帮助？

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

SOLUTION：

<!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>

感谢所有人！

Answer 1

要使用top，right，bottom或left属性，您必须将对象的display属性设置为{{1} }，absolute或relative。

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

固定在右侧浮动

1 个答案: