...

View Full Version : Floating Box with CSS only?



SneakerHead
05-05-2010, 01: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?

http://hypebeast.com/2010/05/gp-jeans-2010-springsummer-collection/

Thanks in advance for any help, much appreciated.

Excavator
05-05-2010, 02: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;
}

SneakerHead
05-05-2010, 03: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

Excavator
05-05-2010, 03: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?

SneakerHead
05-05-2010, 03: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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum