如何在滚动时将div浮动到边并使其粘滞

Question

<div id='container'>
    <div id='nav'>
        Nav things
    </div
    <div id='main'>
        <span class='clickme' id='1'>Thing 1</span>
        <span class='click me' id='2'>Thing 2</span>
        Etc..
    </div>
    <div class="div_class 1'>
        Explanation of Thing 1.
    </div>
    <div class='div_class 2'>
        Explanation of Thing 2.
    </div>
</div

#container
{
    margin: 0px auto;
    width: 90%;
}
#nav
{
    float: left;
    width: 15%;
}
#main
{
    float: left;
    width: 15%;
}
.div_class
{
    float: right;
    display: none;
}

Answer 1

使用position:fixed，您的操作是正确的。您只需要告诉元素要去哪里：

#floater {
    position: fixed;
    top: 0;
    right: 0;
}

根据需要调整top和right（如果愿意，也可以调整left和bottom)以避免重叠导航分区。

请参阅这个JSFiddle的基本演示，以及这个带有导航栏的演示。