固定位置的 Div 随页面滚动

Question

即使使用Firebug我也不知道如何实现这一点：

看看页面左侧的社交div。它会平滑地跟随您：他们使用了哪种CSS定位？我只读到了绝对定位，没有更多内容。

我尝试了相同的方法，但在我的页面中它却无法滚动；

使用jQuery和animate会让它变得太漂亮；

每次滚动修改CSS看起来很奇怪，它会卡顿一毫秒然后再移动。如何获得它们相同的效果？

参考链接：http://techcrunch.com/2011/08/04/sources-livingsocial-close-to-acquiring-turkish-daily-deals-site-grupfoni/

- Damiano Barbati

Answer 1

这是一个处理此问题的jquery插件演示。这个插件的根源来自于Joe上述提到的优秀教程，但它将该教程提供的解决方案推向了更深入的层次。

演示：http://jsfiddle.net/y3qV5/ 插件和源代码：https://github.com/bigspotteddog/ScrollToFixed 用法：

$(document).ready(function() {
    $('#cart').scrollToFixed();
});

- bigspotteddog

---

非常非常非常...它还包含各种各样的东西，如在同一页面上修复多个div。 - Khurram Ishaque

Answer 2

尝试使用一些 jQuery 和 CSS 来解决这个问题。 这应该能够让你以相对较少的工作量获得相同的效果... http://jqueryfordesigners.com/fixed-floating-elements/

- Joe Conlin

Answer 3

这个效果有两种相关的样式：

.post-share-widget.floating {
    position: fixed;
    top: 68px;
}
.post-share-widget.pinnedTop {
    bottom: auto;
    position: absolute;
}

他们使用JavaScript滚动处理程序，在页面当前滚动位置的基础上，将小部件容器的className设置为“floating”或“pinnedTop”。

- sethobrien

---

谢谢，但是你说的“根据我滚动的位置”是什么意思？我只是向下滚动页面。 - Damiano Barbati

这就是@sethobrien的意思：当.post-share-widget超出窗口顶部时，它的位置被设置为固定，这意味着它会停留在顶部。当您再次向上滚动时，它将被赋予position:absolute，以将其放回原处。 - Bojangles

@hysoka44 我修改了措辞以澄清意思。 - sethobrien