View Full Version : Floating Box with CSS only?

May 5th, 2010, 02:29 PM
Hi I'd like to know how this site (linked below) does their floating share box on the left side. I notice it starts from a certain x and y coordinate and then it gets pushed down along with the top of the window when the user scrolls down pass that point, sticking to the top. It doesn't look like javascript as it's not smooth or have any type of animation. Can this be done strictly with CSS? Any other examples?


Thanks in advance for any help, much appreciated.

May 5th, 2010, 03:16 PM
Hello SneakerHead,
That's just an absolute postitioned box that is relative to their #wrapper.

#sharebox {
width: 50px;
padding: 7px;
border: solid 1px #DDD;
position: absolute;
top: 73px;
left: 50%;
margin-left: -576px;
background-color: #FFF;

May 5th, 2010, 04:04 PM
Thanks Excavator, I'm doing just that but the box doesn't seem to stick to the top as the user scrolls down the page. As you can see on this site the sharebox sticks to the top as you scroll down, using only this css code you pointed out doesn't seem to have that effect...?

Thanks again

May 5th, 2010, 04:23 PM
Oops, there is some js acting on that #sharebox to recalculate the top:__px that I can't seem to find.

...sorry about that.

Would position:fixed; (http://nopeople.com/CSS/position%20fixed/index.html) work for what you're doing?

May 5th, 2010, 04:39 PM
Thanks, fixed kind of does it, but it doesn't provide that scrolling effect where it looks like it gets pushed down when you get to that point.

Perhaps this thread is better served on the js forum?