How to Make Sidebar Widgets "Sticky"/Scrollable

  • Unknown's avatar
    rthaw31 · Member ·

    Hi,

    We want to make all the sidebar widgets on our blog to scroll with the page as the user scrolls down. After doing some research, I only see solutions involving adding plugins, which doesn’t look to be supported on wordpress.com

    Is there a way to accomplish this through CSS?

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • staff-loquaciousloon · Staff ·

    Hi @rthaw31!

    There isn’t currently a good solution to this in your particular case – you can make an item stay on the screen while you scroll by giving it position: fixed in the CSS, then making sure nothing gets hidden behind it. This can work well for navigation menus because they’re always at the top of the screen.

    Your sidebar is a little different – you’d want (I imagine) for it to scroll normally until it hits the top and _then_ stick. That requires special code (more than CSS) or a plugin that isn’t an option for your site as it is now.

    The good news is that CSS is evolving. In the future, we should be able to use position: sticky – which lets you say (basically) scroll normally for a certain amount of time, and then stay in place.

    It isn’t fully supported in all of the major browsers yet, and last I looked not on any of the mobile browsers. But someday :)

    Here’s a table that shows support for this (and other) CSS properties, if you’re curious at all:

    http://caniuse.com/#search=position%3A%20sticky

    Edit: my mistake, it looks like it does have mobile support but only on iOS so far. That’s something at least!

  • The topic ‘How to Make Sidebar Widgets "Sticky"/Scrollable’ is closed to new replies.