CSS半固定元素？ [英] CSS Semi-fixed Element?

问题描述

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

I remember seeing an example of this recently, but for the life of me I can't find the site.

这是一个按钮或类似的东西坐

It was a button or something similar that sat in its place near the top of the screen, then when you scroll down it stays on screen.

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

Now that I think about it, it must have been javascript-powered, but it looked really natural.

有没有人知道有这个功能的网站或有关如何做的信息？

Does anyone know of a site with this functionality or information on how to do it?

编辑

不，不只是位置：固定或使用javascript永久浮动。

EDIT
No, it wasn't just position:fixed or permanently floated using javascript.

推荐答案

感谢durilai指出这已包括：

Thanks durilai for pointing out that this has been covered: How to make an element slide with the viewport as it scrolls?

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

As it turns out, it was right here on SO (the question editing page) that I saw this. The "How to Format" box sits to the right of the editing box and moves with the rest of the page, but becomes position:fixed when it should be scrolled out of view.

这是通过使用jQuery来完成的。我想他们有一些自定义代码，但这里是我的实现：

This is done by SO using jQuery. I think they have some custom code there, but here is my implementation:

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半固定元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！