Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Floating Box with CSS only?

    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-jean...er-collection/

    Thanks in advance for any help, much appreciated.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    Hello SneakerHead,
    That's just an absolute postitioned box that is relative to their #wrapper.
    Code:
    #sharebox {
      width: 50px;
      padding: 7px;
      border: solid 1px #DDD;
      position: absolute;
      top: 73px;
      left: 50%;
      margin-left: -576px;
      background-color: #FFF;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,835 Times in 1,819 Posts
    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; work for what you're doing?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •