Sticky and floating share bars: when they help

Two shapes, two screens

On desktop, a floating sidebar sits in the left margin beside the article column and follows the reader down the page. On phones there is no margin, so the equivalent is a bar fixed to the bottom of the screen. Top-fixed share bars on mobile compete with the browser's own address bar and the site header, and they are the pattern readers find most intrusive.

When a sticky share bar earns its place

• Long guides and tutorials where the end-of-post buttons are thousands of pixels away.
• Pages people share while reading, such as data pieces and checklists.
• Sites whose analytics show shares mostly come from mobile.

When it gets in the way

• Short posts where the end-of-post row is already on screen.
• Layouts with a narrow margin, where the rail overlaps text at some window widths.
• Pages that already have a sticky header, cookie notice and chat widget. Three fixed elements on a phone leave little room to read.

Build it without layout shift

1. 01

   Reserve space

   If the bar is injected by script after load, the page jumps. Use CSS so the bar is part of the first render, and add bottom padding to the body on mobile equal to the bar height.

2. 02

   Pick a breakpoint

   Show the rail only when the margin is wide enough, for example above 1100 pixels, and switch to the bottom bar below it. Test the widths in between.

3. 03

   Keep it short

   Four icons at most on mobile. Put copy link first.

4. 04

   Respect the keyboard

   Fixed elements must not trap focus, and the bar's links need visible focus styles.

5. 05

   Let readers dismiss it

   A small close control on mobile is courteous and reduces frustration on long reads.

The CSS below does the mobile half of that. The bar is in the HTML from the start, the body reserves its height, and the bottom inset from env() keeps it clear of the home indicator on phones with rounded screens.

.share-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 52px; padding-bottom: env(safe-area-inset-bottom);
  display: flex; justify-content: center; gap: 8px;
  background: #ffffff; border-top: 1px solid #d9d9d9;
}
body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
  .share-bar { position: sticky; top: 120px; bottom: auto; left: auto; right: auto;
    width: 48px; height: auto; flex-direction: column; border: 0; }
  body { padding-bottom: 0; }
}
@media (max-height: 480px) { .share-bar { display: none; } body { padding-bottom: 0; } }

Worked example: a 3,000 word guide

Consider a 3,000 word how-to on a site where 70 percent of sessions are on phones. The figures are invented but the proportions are ordinary. At a phone reading width the article runs about 11,000 pixels tall, so the end-of-post row is roughly 25 screens away from the introduction. Readers who decide halfway through that a friend needs the guide have nowhere to click.

The lesson in the table is that the bar itself roughly doubles share clicks on this long page, and that the implementation decides whether you pay for it in layout shift. The site keeps the CSS version, hides the bar below 480 pixels of viewport height, and turns it off on posts under 800 words where the end-of-post row is already close.

The old add-ons, in context

Plugins of the MashShare era sold sticky bars and floating sidebars as separate add-ons, and those product pages still attract links. The ideas were sound. What changed is that page experience signals now measure layout shift, so the implementation matters as much as the placement.

What goes wrong

• Bar covers the footer. Without body padding, the last lines of the post and the footer links sit under the bar. Reserve the height.
• Two rows at once. The bar stays visible while the end-of-post row scrolls into view. An intersection observer on the row can hide the bar while the row is on screen.
• Rail overlaps text. Between about 1000 and 1150 pixels wide the margin is too narrow for a 48 pixel rail. Set the breakpoint where the margin is genuinely free, and test the widths between.
• Fixed bar in landscape. A 52 pixel bar on a 360 pixel tall landscape viewport takes a seventh of the screen. Hide it below about 480 pixels of height.
• Cookie notice collision. Two bottom-fixed elements stack or overlap. Delay the share bar until the notice is dismissed, or move the notice to the top.

Check it worked

• A lab test on a phone profile reports CLS under 0.1 with the bar present, and the bar is visible in the first screenshot of the filmstrip.
• At 360 by 640, 390 by 844 and 412 by 915 the bar shows four buttons or fewer on one line and does not cover the last paragraph.
• In landscape at 480 pixels of height or less, the bar is hidden.
• On a 1280 pixel desktop the rail sits in the margin without touching the article column; at 1024 pixels it is gone.
• Tab order reaches the bar after the article, and Escape or the close control dismisses it on mobile.

If the bar passes those checks but share clicks do not move after 30 days, remove it. Buttons that sit on screen for every reader need to earn their place, and the sizing rules in mobile share button layout plus the measurement steps in share buttons and page speed tell you whether it does. Other placements are compared across the share buttons guides.

Sources

• web.dev: Cumulative Layout Shift (CLS)
• Google Search Central: avoid intrusive interstitials and dialogs
• MDN Web Docs: the CSS env() function and safe-area insets

Questions

Related reading

1. 01Share buttons on mobile: layout, size and native sharingMake share buttons work on phones: tap target sizes, one-line rows, bottom bars, the native share sheet, and how to show different buttons on small screens.6 min read
2. 02Share buttons and page speedWhy some share buttons slow WordPress pages and others cost almost nothing. How to measure the impact, and what to change to keep sharing fast on every page.5 min read
3. 03Which share networks to show, and how manyHow to choose which social share buttons to display: match networks to your audience, keep the row short, and add copy link, email and messaging options.6 min read