css - 如何在访问者向下滚动到帖子时移动小部件？

Question

我的 wordpress 博客上有一个分享后小部件。

.post-share {
    width: 80px; padding: 10px 0px; padding-bottom: 0; background: #ffffff; border: 1px solid #CCC;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align: center;
    position: absolute;
    top: 680px;
    left: auto;
    z-index: 99;
    margin-left: -120px;
}

查看此页面 ( http://www.linuxstall.com/linux-file-permissions-chmod/ )。位置是 absolute。因此，当访问者向下滚动到页面时，它就会消失。当我将位置更改为“固定”时。用户必须在他的浏览器上打开“全屏”才能看到完整的小部件(实际上小部件很长)。我希望它是绝对的，但我希望它应该随着访问者向下滚动页面而向下移动。我该怎么做？

Answer 1

“简单”的方法是稍微更改一下您的 CSS。只是更换

position: absolute;
top: 680px;

与

positiion: fixed;
bottom: 10px;

这将使您的小部件在屏幕底部完全可见(直到用户以 640x480 运行)，并在用户向下滚动时保持在原位。

如果您希望小部件在打开网站时只显示一半，但在用户开始滚动时在视口(viewport)顶部保持可见，您将需要一些 javascript(在我看来，应该尽可能避免).