JQuery "Animation" Help

  • I'm getting a bit confused. I'm not very experienced with jQuery for doing things like animation.

    Here's what I have:

    A web page with a large header bar at the top. below that, I have my content. To the side of the content, I have a sidebar, which is currently fixed. The sidebar can get pretty long. So long, that it can collide with the footer.

    So what I would like is for the sidebar to move up in response to the viewport moving down, until it reaches the top of the viewport. And then, I want it to stay effectively fixed.

    Is this possible? What methods should I be calling? Or plugins should I be using?

    It looks like I can roll my own with the scroll event handler. And presumably scrollTop.

    Or I can use jQuery waypoints.

  • :belt_onion:

    If the sidebar can be so long that it collides with the footer, but you won't let it scroll the top of the sidebar past the top of the screen, won't the options at the bottom be unusable for people without monster resolutions?

  • You mean something like this?

  • :belt_onion:

    The handling on those right side summaries is pretty nifty.

  • Yeah, I was worried about that. But the header was eating up about 250 pixels. Getting those back gave me room to spare at 768 tall.

    Luckily, it's not programmatic content. It's carefully worded sales copy. So I have some wiggle room.

  • Yup, exactly like that. I ended up going with waypoints-sticky, the first one I found. 😄

    I think I'll bookmark yours, though. I might change the footer arrangement pretty significantly if the sidebar gets too long. I like how scrollToFixed handles all three cases

Log in to reply

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.