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

只需将要保留在浏览器上相同位置的容器的position设置为fixed（position: fixed）即可。然后你可以通过说：bottom: 30px; right: 0等等来准确定位它。

Answer 2

如果您希望有一个侧栏可以粘在屏幕上并允许您滚动页面，我认为您需要重新评估您的html布局。

在您当前的布局中，您要求副本在侧栏部分浮动，无论它位于何处。您的代码以不同的方式构建它们会更健康。

我的建议是你使用一个框架，例如：bootstrap，foundation，materialize。

或

使用Flexbox - example - http://www.w3schools.com/html/html_layout.asp

此外，最好的做法就是让所有的标签在不知名的情况下浮动。

如果你只想让你的盒子贴在角落

class {
  position:absolute;
  bottom:20px;
  left:20px;
}

Answer 3

你应该给你的段落margin-left一些，以避免重叠：

#introtable{
position:fixed;
width:255px; 
margin-top:10px; 
margin-bottom:10px;
float:left;
}
p{
margin-left:15%;
}

Answer 4

我不确定这可以用纯CSS完成，但遗憾的是我不是CSS专家。但是使用JS（在本例中使用JQuery），您可以在滚动时更改表margin-top。上面包装的文字仍然会被包裹，但这将不可见，文字也不需要移动那么多。

由于在滚动时设置css会产生一种不稳定的效果（特别是如果处理异步），我已经将margin-top的设置调整为短动画以使表格易于使用：

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

示例fiddle

制作一个浮动：左边的div粘

4 个答案: