Design a slim announcement or call-to-action bar that stays fixed to the top or bottom of the screen and appears once a visitor has scrolled. Preview it live and copy the code.
Scroll inside the preview to see the bar slide in. Set the scroll distance to 0 to show it straight away.
Runs entirely in your browser. Nothing is uploaded to any server.
Your main action stays visible however far people scroll.
It waits until the visitor is engaged and can be dismissed.
A few lines of CSS and JavaScript, no library.
A sticky bar works best with one short message and one clear action. Keep it slim so it does not cover too much of the screen on phones, and always give visitors a way to dismiss it.
The bar starts off screen with transform and visibility, so it does not take up space or receive keyboard focus until it slides in. When dismissal is remembered, the choice is kept in sessionStorage and the bar stays hidden until the browser tab is closed.
A single button converts better than several links.
On small screens the text and button stack and stay centred.
A labelled region, a real link and a labelled close button.
Put the HTML just before the closing body tag, the CSS in your stylesheet and the script after the HTML.
A fixed bar sits above the page content. If it hides something important, add bottom padding to the body equal to the bar height.
Set the scroll distance to 0. The bar then starts visible and only hides when the visitor dismisses it.
With the remember option on, it is stored in sessionStorage, so the bar returns in a new tab or browser session.
A slim, dismissible bar is fine. Avoid full-screen overlays that block content, which search engines treat as intrusive interstitials.
More free tools from My Panda Toolbox.