My problem is that I have a long sidebar and most posts are somewhat short so when the user scrolls down after the end of the post they only see blank space on the left and just the sidebar on the right.

The sidebar should ideally scroll then fix when it gets to the bottom, then scroll up when the user scrolls up, then fix itself at the top until the scroll direction changes again. This is what happens inside the wordpress admin area for example.

This is used perfectly in the twentyfifteen theme.

I searched a lot but could not find a solution. I tried a plugin like "Sticky menu (or anything) on scroll" but it didn't work like twentyfifteen. I am using MagZen theme.

Any help appreciated.

My problem is that I have a long sidebar and most posts are somewhat short so when the user scrolls down after the end of the post they only see blank space on the left and just the sidebar on the right.

The sidebar should ideally scroll then fix when it gets to the bottom, then scroll up when the user scrolls up, then fix itself at the top until the scroll direction changes again. This is what happens inside the wordpress admin area for example.

This is used perfectly in the twentyfifteen theme.

I searched a lot but could not find a solution. I tried a plugin like "Sticky menu (or anything) on scroll" but it didn't work like twentyfifteen. I am using MagZen theme.

Any help appreciated.

• posts
• sidebar

1 Answer 1

Sounds like a fixed position and 100% height are what you're after:

position: fixed; height: 100%;

The TwentyFifteen theme uses the following code in style.css:

@media screen and (min-width: 59.6875em) {
    body:before {
        display: block;
        height: 100%;
        min-height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 29.4118%;
    }

    .sidebar {
        float: left;
        margin-right: -100%;
        max-width: 413px;
        position: relative;
        width: 29.4118%;
    }

    .site-content {
        display: block;
        float: left;
        margin-left: 29.4118%;
        width: 70.5882%;
    }

Alternative: I've been using the 2015 theme and trying to get the left, persistent navigation sidebar to scroll independently of the content, instead of the default behavior.

From a user experience perspective, the user is scrolling the content, not the menu. When both sections scroll simultaneously, the user is encountering a lot more information, when they probably just want to see more of the main body.

If you interested in this alternative, see this SE thread.