Stacks does not normally allow elements to escape from the central content container on a page. So the sticky stack instead uses some basic jQuery Javascript code to append the sticky onto the opening <body> tag at the start of your page. The Sticky has a CSS z-index value of 100, which should be enough to display the sticky on top of other content, but not let it interfere with lightbox effects. The Sticky stack is easy to setup, and you can see an example of it at the top of this page.

Note If you are looking for a more advanced version with more customisable options, support for animation effects, ability to dismiss and the option to cookie site visitors, have a look at the Gateway stack instead.

Setup

  1. After installation, drag and drop a Sticky stack into your page.
  2. In the placeholder, drag and drop other stacks or content (these will be shown in your Sticky).
  3. In the stack settings, you can change the size and position of the Sticky.
  4. Optionally, you can also set the entire Sticky as a link through to a page, resource or URL.

Important You should only use one Sticky stack per-page. Take care to ensure your Sticky does not obscure page content or navigation links.

Print output

Sticky stacks are automatically hidden from print and PDF output, to prevent them getting in the way of other page content.

Oh wow! This is a Sticky Stack!

Buggy layering?

If you find that the Sticky stack is going behind other content on a page (like stretched backgrounds, video or banners) you can sometimes force the stack further forward using this custom CSS code: 

.sticky {
    z-index: 9999 !important;
}
Z-index is the CSS property which arranges the order of elements on a page. So (as an example) giving Sticky a z-index value of 100 would lift it forward of elements with a z-index of 90, but Sticky would still remain behind a lightbox window shade with a z-index of 500 applied. Z-index often relies on other elements in a page having a position and z-index value applied.

Source code

This is the source code you can use to create your own Sticky containers in non-stack pages. In the code, change the width, position and background settings to suit your needs. Other CSS preoperties like borders or rounded corners could also be applied. 

<div style="display:block; position:fixed; top:0px; right:0px; height:200px; width:200px; background:#FFFFFF;">
Hello World!
</div>
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.