ScrollShow Stack

show or hide fixed positioned content, depending on the scroll position on the page

The ScrollShow Stack is a versatile solution to draw attention to some content by keeping it in the same place (fixed position) even if the page is scrolled. This content can be shown or hidden depending on the scroll position and direction (up or down). Because the ScrollShow Stack can contain virtually any content, it is not only a great solution for call-to-action buttons and boxes, but also for menu stacks, social media icons, newsletter subscription invitations, etc.

Demos
This page shows simple examples of the nine possible positions of the stack (any combination of top/bottom/center and left/right/center). Just scroll down slowly to see them all appearing and disappearing one by one.

Once you click on the close button or icon, that box will no longer appear. Show all boxes (including those you closed with the close icon or a close link).

On the demo page are some more advanced examples of the possibilities of this stack.

Usage

Drag any content you want to show in a fixed position inside this stack.

Make your choice from the numerous options (fig. 1).

To close the stack’s content, you can use the close icon, but also an empty link* inside this stack with a class ssClose (fig. 2).

* for an empty link, set the URL of that link to # (a.k.a. hash or number sign, see fig. 2).

There are a few unsupported, advanced options that may come in handy during development:

To show all ScrollShow Stacks (including those you closed with the close icon or a close link), use an empty link with a class ssOpenAll.
example: show all ScrollShow Stacks on this page

To close all ScrollShow Stacks, use an empty link with a class ssCloseAll.
example: close all ScrollShow Stacks on this page

To determine to current scroll position, use the following code anywhere on the page: <span class=ssShowAll>0</span>px.

This stack tries to use the text and link styling of the theme in its content, but that does not work with every theme. If necessary, use the ScrollShow content settings to style text and links. These settings can of course also be used to overrule the theme settings.

Min. width and max. width will overrule the fluid width. For fixed width content, just give both settings the same value.

Limitations

When the visitor has JavaScript disabled in his browser, no show or hide action will happen. This means that when the stack is initially hidden/shown when the page loads, it will stay hidden/visible. Close icons and close links will also not work.

This stack does not look great in Edit mode. In fact, in Edit mode you only get a vague idea of what the result will be. Switch to Preview mode to see the exact effect.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3).

Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].

fig. 1

fig. 2: an ‘empty’ link with a class ssClose

In order to be able to scroll down enough to see all examples of the ScrollShow Stack, some empty space is added below.

top left

close

center left

close

bottom left

close

center top

close

center center

close

center bottom

close

top right

close

center right

close

bottom right

close

Marathia’s Stacks

stacks for the rest of us