jquery - 如何将 div 浮动到一边并在滚动时保持粘性

Question

所以我有一些隐藏的 div，但是当您单击具有与 div 类对应的 id 的跨度时会显示。我有那个公园工作，它会显示 div，但我有一长串不在页面上的东西。我希望隐藏的 div 粘在屏幕的顶部，这样如果用户点击了很远的链接，他们就不必一直滚动到顶部才能看到它。这是一些代码，可以让您了解我正在使用的内容。

HTML：

<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

CSS：

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

我在 div_class 类上尝试了“位置：固定”，但这会将文本放在与导航 div 重叠的左上角。然后我尝试添加填充，但这使得 div 与一些链接重叠并使它们无法点击。

Answer 1

你在正确的轨道上position: fixed。你只需要告诉元素去哪里：

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

根据需要调整top和right（或left如果bottom您愿意）以避免重叠导航 div。

请参阅此 JSFiddle以获得基本演示，以及此带有导航栏的演示。