The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript scroll-impervious slide-down information bar

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #26260

    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.


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


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


    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.


    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 … designers/


    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.