Javascript 做一个浮动：左div粘滞

我正在为一个简单的问题寻找一个简单的解决方案，我相信它已经在某个地方得到了应用，但没有找到解决方案

所以现在我有一个很长的介绍页面，比如维基百科，还有一个导航链接列表，比如维基百科。在维基百科中，他们在每一段的末尾都有指向顶部的链接，但我不想这样做。相反，当向下滚动时，我试图使表变粘

当前代码如下所示：

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

#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也是可以接受的

---

请帮忙。提前感谢。

只需将容器的

位置设置为
固定的
（
位置：固定的
）。然后你可以准确地定位它，说：
bottom:30px；右：0
等。
只需将容器的
位置设置为
fixed
（
位置：fixed
）。然后你可以准确地定位它，说：
bottom:30px；右：0
等。
如果您希望有一个附在屏幕上并允许您滚动页面的侧栏，我认为您需要重新评估html的布局

在当前布局中，您要求副本在侧栏部分周围浮动，无论其位于何处。您的代码以不同的方式对它们进行框架设计会更健康

我的建议是使用一个框架，例如：Bootstrap、Fuffic、ObjialdIs/
或

使用Flexbox

而且，让p标签随意地四处浮动并不是最好的做法


如果你只是想让你的箱子贴在角落里

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

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

在当前布局中，您要求副本在侧栏部分周围浮动，无论其位于何处。您的代码以不同的方式对它们进行框架设计会更健康

我的建议是使用一个框架，例如：Bootstrap、Fuffic、ObjialdIs/
或

使用Flexbox

而且，让p标签随意地四处浮动并不是最好的做法


如果你只是想让你的箱子贴在角落里

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

你应该给你的段落留出一些
空白
，以避免重叠：

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

你应该给你的段落留出一些
空白
，以避免重叠：

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

我不确定用纯CSS可以做到这一点，但遗憾的是我不是CSS专家。但是使用JS（本例中使用JQuery），您可以在滚动时更改表
margintop
。上面的包装文本仍将被包装，但这将不可见，并且文本不需要移动太多

由于在滚动时设置css会产生一种不稳定的效果（特别是在异步处理的情况下），因此我将边距顶部的设置调整为一个短动画，以使表格轻松就位：

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

示例
我不确定用纯CSS可以做到这一点，但遗憾的是，我不是CSS专家。但是使用JS（本例中使用JQuery），您可以在滚动时更改表
margintop
。上面的包装文本仍将被包装，但这将不可见，并且文本不需要移动太多

由于在滚动时设置css会产生一种不稳定的效果（特别是在异步处理的情况下），因此我将边距顶部的设置调整为一个短动画，以使表格轻松就位：

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

示例
我认为您应该提供一个实例，因为我不太明白问题是什么如果您希望段落环绕菜单，但菜单位置发生变化，是否希望页面上的文本在滚动时变形并环绕菜单？那将是一次奇怪的经历。如果没有，您可以在菜单上使用
position:fixed
，给菜单一个宽度，并使段落部分的
边距保持在左侧，不管菜单的宽度是多少（这样段落就不会落在菜单后面）我认为你应该提供一个实例，因为我不太明白问题是什么如果你想让段落环绕菜单，但菜单位置改变了，你想让页面上的文本在滚动时变形并环绕菜单吗？那将是一次奇怪的经历。如果没有，您可以在菜单上使用
position:fixed
，并为菜单指定一个宽度，并使段落部分的
边距向左
，无论菜单的宽度如何（这样段落就不会落在菜单后面），正如我提到的，当我尝试position:fixed时，段落显示在导航表下，这不是我想要的。我想把桌子的位置粘在一起，同时让文字环绕在桌子上。@WangTianjian好的。也许您可以尝试这样做：浮动时将容器宽度设置为15%，内容宽度设置为70%。我曾经遇到过同样的问题，这为我解决了。正如我提到的，当我尝试定位：固定时，导航表下出现了段落，这不是我想要的。我想把桌子的位置粘在一起，同时让文字环绕在桌子上。@WangTianjian好的。也许您可以尝试这样做：浮动时将容器宽度设置为15%，内容宽度设置为70%。我曾经遇到过同样的问题，这就解决了我的问题。这是一个糟糕的答案，代码写得不正确，无法达到预期的结果。对不起，我以后会更清楚，而不是