javascript - 制作一个 float :left div sticky

Question

我正在寻找一个简单问题的简单解决方案，并且我相信它已在某处应用，但无法找到解决方案。

所以现在我有一个很长的介绍页面(如维基百科)和一个导航链接列表(如维基百科)。在维基百科中，他们在每个段落的末尾都有返回顶部的链接，但我不想这样做。相反，我试图在向下滚动时使表格保持粘性。

当前代码是这样的:

    <div id="introtable">
    <table class="normalfont">
        <tr>
            <td style="border: 1px solid #000000;">
                <p align="center" style="margin-top:13px;">Contents</p>
                <ul>
                    <li><a href="#something">something</a></li>
                    <li><a href="#something">something</a></li>
                    <li><a href="#something">something</a></li>
                    <li><a href="#something">something</a></li>
                    <li><a href="#something">something</a></li>
                    <ul>
                        <li><a href="#something">something</a></li>
                        <li><a href="#something">something</a></li>
                    </ul>
                    <li><a href="#something">something</a></li>
                    <ul>
                        <li><a href="#something">something</a></li>
                        <li><a href="#something">something</a></li>
                    </ul>
                    <li><a href="#something">something</a></li>
                    <ul>
                        <li><a href="#something">something</a></li>
                        <li><a href="#something">something</a></li>
                        <li><a href="#something">something</a></li>
                    </ul>
                    <li><a href="#something">something</a></li>
                    <ul>
                        <li><a href="#something">something</a></li>
                        <li><a href="#something">something</a></li>
                    </ul>
                </ul>
            </td>
            <td style="width:25px;"></td>
        </tr>
    </table>
</div>

<p align="justify" id="something" style="margin-top:5px;">
                some texts
            </p>

            <p align="justify" style="margin-top:5px">
                some texts
            </p>

            <p align="justify" style="margin-top:5px">
                some texts
            </p>

<p align="justify" id="something" style="margin-top:5px;">
                some texts
            </p>

            <p align="justify" style="margin-top:5px">
                some texts
            </p>

            <p align="justify" style="margin-top:5px">
                some texts
            </p>

CSS 是这样的:

#introtable{
    width:255px; 
    margin-top:10px; 
    margin-bottom:10px;
    float:left;
}

.normalfont{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
}

现在，段落文本环绕表格，在表格和文本之间留下一些空白。

我希望表格粘在页面上，同时仍然向左浮动，也就是说，仍然有段落围绕它。

我尝试添加position:fixed，但它覆盖了float:left，使段落出现在表格下方。

可以通过纯 CSS 实现吗？如果没有，javascript也可以接受。

请帮忙。提前致谢。

Answer 1

我不确定这是否可以用纯 CSS 来完成，但遗憾的是我不是 CSS 专家。但是使用 JS(本例中使用 JQuery)，您可以在滚动时更改表 margin-top。上面的换行文本仍将被换行，但这将不可见，并且文本不需要移动太多。

由于在滚动时设置 css 会产生一种不稳定的效果(尤其是异步处理时)，因此我将 margin-top 的设置调整为短动画，以使表格轻松到位:

$(window).scroll(function(e){
    $('#introtable').stop().animate({'margin-top': 10 + $(this).scrollTop()}, 10);
});

示例 fiddle