Popular

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.

The code

<div class="ats_kit ats_kit_size_32 ats_floating_style ats_floating_style_left">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>

What to watch for

On a narrow screen the bar ignores left and right and pins to the bottom edge instead, so it never covers the text.

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.

Live demo

Demo ↗

An article worth passing on

On your own page the bar docks to the window itself and stays there as the reader scrolls. Here it docks to this box, so you can see where it lands.

This one is real — the same widget, the same classes — docked to the left edge of the box above. Narrow the window below 640px and watch it move to the bottom, which is what it does on a phone.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<div class="ats_kit ats_kit_size_32 ats_floating_style ats_floating_style_left">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_btn_email"></a>
  <a class="ats_dd"></a>
</div>

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

Shape How many show