开发者

CSS Semi-fixed Element?

开发者 https://www.devze.com 2022-12-23 08:17 出处:网络
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 scro

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 just position: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: ""   });
    }
});
0

精彩评论

暂无评论...
验证码 换一张
取 消