Grow your CSS skills. Land your dream job.

scroll-impervious slide-down information bar

  • # September 27, 2009 at 3:10 am

    This is my first post at the CSS Tricks forum, though I follow the blog and love this website’s vibe… so hello to everyone and I look forward to participating in this community!

    This is a question regarding the first site I’ve ever coded from scratch. I have familiarity with HTML and CSS, but I don’t know much of anything about javascript. However I told my client I’d be able to do this since it seems so simple. Except I really don’t even know where to begin, and I’m starting to fall behind schedule after finishing the rest of the site and putting off this damn <div> until the end! I probably shouldn’t have sent her a mockup that included any javascript at all. But now it’s not really feasible to change the design. So I hope a kind and generous soul can help me out.

    Here’s what I’m trying to do:

    This is how the page looks when you go to the site. Notice the blue bar along the top.

    [img]http://i38.tinypic.com/hv18ut.jpg[/img]

    I want the for the bar to stay locked at the top when someone scrolls, like this:

    [img]http://i34.tinypic.com/11ijnn8.jpg[/img]

    Finally, when someone clicks the bar, I want it do slide down to reveal the content, like this:

    [img]http://i38.tinypic.com/rcsxgl.jpg[/img]

    Shouldn’t be too hard, right?

    I really hope this doesn’t come off as me asking others to do my work for me… I just need someone to point me in the right direction—perhaps there are plugins people know of that could accomplish this easily? I prefer to use jQuery but if this is more easily done with another framework that’s fine too.

    Thanks so much in advance. Again I hope it’s not too audacious or brazen of me to make this kind of post immediately upon joining the boards.

    # September 27, 2009 at 4:16 pm

    well, I would think that you could use css fixed property to keep it in place. or some absolute positioning. As for the sliding div, check this page out

    http://www.webdesignerwall.com/tutorial … designers/

    # September 27, 2009 at 5:01 pm

    Thank you!

    This is exactly what I was looking for. I can’t believe in all my searching I didn’t come across that webdesignerwall article.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".