Catch All Sticky Sidebar

The layout consists of an HTML5 <section> element containing an <article> element and an <aside> element.
The article holds the main content - an image with alt text, an h1 heading and a text block.
Sidebar Scroll - or Not
The sidebar has an optional h1 heading with scroll indicators and ad blocks which contain an image, heading text and CTA style link.
The sidebar can have an auto height so that it shows all the content or a fixed height with the overflow set to scroll as shown in this example.
Sidebar Stick
If the sidebar height is less than the main content's height, the sidebar will stick to the top of the container and remain in view as the page is scrolled.
In this example, the sidebar height is set to 770px.
Layout Switch
On computers and tablets in landscape mode, the main and sidebar sit side by side. As the browser/device width is reduced, the layout switches at the break point so that both elements become full width and the sidebar slides below the main article. The add blocks then align themselves in a vertical stack.
In this example, the break point is set to 799px so that the sidebar drops below the main section when viewed on an tablet in portrait mode and a mobile phone in both landscape and portrait.