AddToSite

← Customize

Customize

Floating share bar

A kit can dock itself to the left or right edge of the screen and stay there as the reader scrolls. On a phone it moves to the bottom on its own, because a vertical bar down the side of a 390px screen eats the text.

Live demo

Running on this page

The bar is docked to the edge of your window, not sitting in this box. Scroll the page and it stays put.

This one is real and it is on this page: look at the left edge of the window, or narrow the window below 640px and watch it move to the bottom.

The code

This is the demo above, verbatim. Nothing is shortened for the page.

<div class="ats_kit ats_kit_size_32 ats_floating_style ats_floating_style_left">
  <a class="ats_button_facebook"></a>
  <a class="ats_button_x"></a>
  <a class="ats_button_whatsapp"></a>
  <a class="ats_button_email"></a>
  <a class="ats_dd"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>

The other three positions

Swap the last class. Left and right are vertical; bottom is a full-width strip.

ats_floating_style_left
ats_floating_style_right
ats_floating_style_bottom

It needs no JavaScript of yours

The bar is position: fixed in the widget stylesheet, so there is no scroll handler and nothing to throttle. It costs the same as any other kit.

Next