Rebel Insights

Sticky Positions: Best UI/UX Practices [Design Examples]

 four mobile phones displaying various sticky position versions side by side

What Is a Sticky Position?

A sticky position, or sticky element, is something that remains in a fixed position as you scroll through a web page.

Imagine browsing a site, and suddenly, a bright, colorful box pops up and sticks to the side of your screen like chewing gum. It could be a funny meme, a tempting offer for free pizza, or even a cool quiz about your personality type. That's a sticky element!

Sticky elements are design techniques that enhance the user experience on websites and in apps by offering users an easy way to access crucial information and perform essential actions. This approach involves placing specific content and elements in a designated position on the screen, allowing them to remain visible as a user scrolls.

For brands, they're a powerful tool with benefits that boost brand awareness, engagement, and conversions. Examples of sticky elements include navigation menus, contact details, or call-to-action (CTA) buttons readily available at a user's fingertips.

Here are some benefits of using sticky elements:

  • Grabs a User's Attention: Sticky elements offer eye-catching visuals and placements that capture users' attention to your brand message or call to action. Consider using a bold, visually appealing banner to promote your services or products.
  • Tailors Engagement: You can customize your sticky elements to appear on specific pages or display content relevant to a user's interests to deliver targeted messaging.
  • Improves the User Journey: Sticky elements can enhance the user experience by providing quick access to customer support, social links, “Contact Us” buttons, or an FAQ section.
  • Increases Brand Awareness: A sticky element such as a brand banner can be an ongoing reminder of your business as a user scrolls. Contrary to typical ads, a sticky element remains in place and helps to reinforce your brand's identity to users.

Common Uses and Placements for Sticky Positions

Place your sticky element in the best way to hold your users' attention and convert them at the ideal time. This placement could be on the side of the screen, at the top, or as a pop-up module, depending on what will benefit your users the most. Consider the following popular uses and placements for sticky elements that have the potential to produce gold conversions:

Navigation Menus

Sticky navigation menus are a common and effective design choice. When navigating a website, you can easily find essential links as you scroll down because the menu always remains at the top. This helps users navigate the site without scrolling up and down, improving their experience with a user-friendly website.

 Common Dreams website scrolling GIF with a sticky navigation menu at the top

Social-Sharing Icons

Social-sharing icons usually remain visible on the side or on the bottom of a screen. These sticky elements are common for blogs and articles, allowing users to easily share content.

 article scrolling GIF with sticky social-sharing icons below the author's image

Call-to-Action Buttons

Sticky CTA buttons, such as “Sign Up” or “Buy Now,” are often placed at the bottom of the screen to help users take action.

 article scrolling GIF with a sticky sign-up CTA fixed at the bottom of the screen

Announcement Bar

With an announcement and promotion bar, you can leverage the top area of your site to inform readers about breaking stories, events, campaigns, or anything else you’d like to feature prominently.

announcement bar sticky position at the top of a website page

announcement bar sticky position at the top of Premier Guitar website page

The announcement bar’s monthly CTR can range as high as 31.1% or as low as 0.05% in the first month. One month after implementing their announcement bar, Premier Guitar experienced a dramatic boost in their clicks, sessions, and CTR.

announcement bar performance statistics

Sticky Sidebar Ads

Sticky sidebar ads increase visibility and revenue while giving users quick access to helpful content. These ads rotate after an entire scroll through to maximize space and income potential, as well as to ensure that users will see them.

Check out the following case study findings on sticky sidebar performance:

 No Film School's static and sticky sidebar ads analytics indicate higher performance percentages for the sticky sidebar

Scroll-to-Top Buttons

Users often scroll through lengthy pages, and having a scroll-to-top button offers a convenient way to swiftly navigate back to the top of a page. This is particularly useful on pages with extensive content.

 article GIF with a sticky scroll-to-top arrow on the right side of the screen

Cookie Notices

A sticky cookie notice allows users to set their cookie preferences and manage their privacy settings efficiently.

 Heatmap News article scrolling GIF with sticky cookie settings at the bottom

Common Mistakes When Using Sticky Elements

Before implementing sticky elements, avoid these common mistakes:

  1. Avoid Overlapping: Make sure sticky elements don't overlap other essential elements on a page. For example, using a sticky bottom display ad can overlap a footer.
  2. Use Correct Sizing: Make sure the sticky sidebar fits the window vertically, because sometimes the bottom gets cut off on smaller screens. We recommend using a size that ranges from 300–500 px in height, or having the size be defined dynamically depending on the device being used.
  3. Create a Simple User Experience (UX): Make sure sticky calls to action or ads have a close or collapse button. This allows a user to remove any unwanted elements from their screen.
  4. Keep a Consistent User Interface (UI) Design: Make sure sticky elements are consistent and look correct across all devices.
  5. Steer Clear of Overcrowding: Ensure that you are not overcrowding your screen with too many CTAs, as this can distract and possibly frustrate your users.

Sticky Element Design Dos and Don’ts

Explore the following collection of best practices, which includes a set of dos and don'ts to guide you toward effectively using sticky elements on your website.

 two phones showing correct and incorrect sticky CTA versions

 two phones displaying proper and improper sticky ad video placements

 two phones displaying right and wrong ways to present a sticky navigation menu

two phones demonstrating the correct and incorrect times to display relevant and recommended content

Boost User Experience and Conversions With CSS Sticky Positions

Sticky elements provide users with a smooth and intuitive way to interact with a website. Website owners value a straightforward and engaging user experience that offers instant access to the navigation menu and calls to action that promote conversion.

Before implementing sticky elements, think about platform compatibility across desktop and mobile devices, placement to avoid clutter or on-screen distractions, techniques for evaluating their efficacy, performance metrics, and general usability to make the most out of your workflow. Sticky elements help optimize website navigation and engagement when used carefully and with a user-centric approach.

Need help strategizing around and implementing sticky elements across your site? Contact RebelMouse today to learn more about how we can help you move the needle for your business.

What Is RebelMouse?
Request a Proposal

Where 
Websites Are Built

The Fastest Sites in the World Run on RebelMouse

Let’s Chat

new!

RebelMouse Performance Monitoring

Real-Time Core Web Vitals

Get Started
DISCOVER MORE

Our Core Features

Our platform is a complete digital publishing toolbox that's built for modern-day content creators, and includes game-changing features such as our:

Layout and Design toolLayout and Design tool on mobile
animate
animate

Why RebelMouse?

Unprecedented Scale

RebelMouse sites reach more than 120M people a month, with an always-modern solution that combines cutting-edge technology with decades of media savvy. And due to our massive scale, 1 in 3 Americans have visited a website powered by RebelMouse.

120M+ Users
550M+ Pageviews
17+ Avg. Minutes per User
6+ Avg. Pages per User

Today's Top Websites Use RebelMouse

Thanks to the tremendous scale of our network, we are able to analyze a wealth of traffic data that informs our strategies and allows us to be a true strategic partner instead of just a vendor.

upworthyindy100Vault12No Film SchoolRawStoryResponsible StatecraftPrideMNI Market NewsPremierGuitarPenskeINN Educate Brand ConnectThe FulcrumGZEROOkayafricaBrit+CoPaper MagazinePowerToFlyNarcityCommonDreamsAllBusiness

What Clients Say

We’re here to help you weigh and understand every tech and strategic decision that affects your digital presence. Spend less time managing everything yourself, and more time focused on creating the quality content your users deserve.

Case Studies

A Team Built Like No Other

RebelMouse employs a unique, diverse, and decentralized team that consists of 70+ digital traffic experts across more than 25 different countries. We have no central office, and we cover every time zone to ensure that we’re able to deliver amazing results and enterprise-grade support around the clock.

Our team is well-versed in all things product, content, traffic, and revenue, and we strategically deploy ourselves to help with each element across all of our clients. We thrive on solving the complex.

Let's Chat