Question

我记得最近看过一个这样的例子，但对于我的生活，我找不到这个网站。

这是一个按钮或类似的东西，位于靠近屏幕顶部的位置，然后当你向下滚动它停留在屏幕上时。

现在我想起来了，它一定是javascript驱动的，但看起来很自然。

是否有人知道具有此功能的网站或有关如何操作的信息？

修改
不，它不只是position:fixed或使用javascript永久浮动。

Answer 1

感谢durilai指出已涵盖这一点：How to make an element slide with the viewport as it scrolls?

事实证明，我在SO（问题编辑页面）上看到了这一点。 “如何格式化”框位于编辑框的右侧，随页面的其余部分移动，但在应该滚动到视图外时变为position:fixed。

这是由SO使用jQuery完成的。我认为他们有一些自定义代码，但这是我的实现：

var scrollerTopMargin = $("#scroll-container").offset().top;
$(window).scroll(function(){
    var c = $(window).scrollTop();
    var d = $("#scroll-container");
    if (c > scrollerTopMargin) {
        d.css({ position: "fixed", top: "0px"   });
    }
    else if (c <= scrollerTopMargin) 
    {
        d.css({ position: "relative", top: ""   });
    }
});

CSS半固定元素？

1 个答案: