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.
Now that I think about it, it must have been javascript-powered, but it loo开发者_高级运维ked really natural.
Does anyone know of a site with this functionality or information on how to do it?
EDIT
No, it wasn't justposition:fixed
or permanently floated using javascript.Thanks durilai for pointing out that this has been covered: How to make an element slide with the viewport as it scrolls?
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.
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: "" });
}
});
精彩评论