Ribbon: appearing on scroll

Ribbons are typical inline templates being inserted to a <div> container on the client's end. All styles, animation effects, and other magic should also be described on the client's end. Usually, the element sticks to the page bottom (or top — up to you) and looks like a narrow strip with a catchy copy and a CTA. To get a clearer idea of what it is, please see the demo.

DemoTo return from the demo page, please use the browser Back button. We were trying to make the demo as close to real life as possible, and did not provide any link to go back intentionally.

How-to

Setting up a template

There're 2 ways to set up an inline template: on your end or in Composer.

Speaking about ribbons specifically. Since you want the container to be "glued" to the top/bottom of your page, you need to add these styles to its class (the example class here is called .piano-container) in your CSS:

.piano-container {
  position: fixed;
  /* for bottom position */
  bottom: 0;
  left: 0;
  width: 100%;
  /* shadow is an optional property */
  box-shadow: 0 0 28px 0 rgba(51, 51, 51, 0.1);
}

To position the ribbon at the top of you page, replace "bottom" with "top" in the sample above (line 4). Also, shadow (the .box-shadow property, line 8) is optional. But it helps to distinguish the ribbon from the rest of the content. This role could be also played by a contrast background color or a border.

When applicable, order your layers properly by adjusting the z-index property.

Making it (dis)appear on scroll

A ribbon can be hide by default and show up upon a certain scroll position (the most common scenario shown in the demo and described in the guidelines); it can disappear again on another scroll position or, oppositely, show up by default and disappear on scroll. Anything is possible, you just need a few more lines of Javascript on your end.

Basically, you need to listen to a scroll event and play with the visibility of the container where the Piano template is being parsed. The easiest way is to switch this container's hidden attribute. Or, alternatively, you can add/remove a CSS class with animation to make the ribbon, for example, slide in/out smoothly.

  document.addEventListener('scroll', event => {
    document.querySelector('.piano-container').hidden = window.scrollY < 200;
  });

In your template you don't need to change anything.

Specifying a template size

Piano inline templates simply take 100% of the parent container width. By parent container we mean the <div> you specify on your end for the Piano template to show up. Regarding its height, the browser counts it automatically according to the template content. So nothing needs to be defined. Instead, just let the Piano template be parsed freely — things like setting up a fixed height would prevent it from displaying correctly.