Platform Updates

New Feature: Stacking Sticky Elements

New Feature: Stacking Sticky Elements

We always love to introduce new features to the RebelMouse platform, and today we're announcing a Stacked Sticky element. This will allow you to have two sticky elements at the top of your page, with the option to have one of the sticky elements disappear after a select amount of time. This can be very useful for an ad or banner you want to display briefly, and then be able to have the space back.

How Does It Look?

It's entirely up to how you want it to look, but here's an example screencast where we have an ad for our new book at the top, followed by a breaking news banner right beneath. You can see that as the page scrolls down, the behavior is set to have the ad removed after a couple of seconds of scrolling, and that it will reappear as the page scrolls back to the top:


How Do I Set It Up?

First, you will need to navigate to the Layout & Design Tool in the hamburger menu (☰). For this example, we'll be placing our Stacked Sticky in the Top Bar.

Once you're in the Top Bar interface (or wherever you decide to place the Stacked Sticky, simply click the + Add Element button to open up a list of available elements:

Next, scroll down to near the bottom of the list, and select Stacked Sticky:

Clicking this will add a Stacked Sticky element to your Top Bar, but it won't be doing anything yet. Note that in general, when you add a new element, it will be placed at the bottom of the page in the Layout & Design Tool, you will want to simply scroll down, find it, and then click and hold, and drag it to the top.

Once you have the element where you want it to be, you can click on it to open the Properties card. Here you'll see options for a Friendly Name and a Mode selection. For the mode, you can select Always Pinned or Pinned After Scroll (defined below):

  • Always Pinned: You can select a frame of time (e.g., 4,000 ms) for the item before it disappears. As you scroll, the item will disappear after the selected amount of time. If you reverse scroll and return to the top, the item will appear again.
  • Pinned After Scroll: The item you want to disappear will be removed on scroll, and only the pinned area is visible after scroll. In this scenario, there is no way to bring back the removed item.

You can see in the following screenshot how we've selected these options for our example:

In this example, the item will be shown for four seconds of scroll, and then be removed, as seen in the screencast above.

But we still have a few more steps to make this work as we want. Look back at the last screenshot, at the bottom, and you'll see + ADD ELEMENT. Click that, and you'll be able to start building your Stacked Sticky. You'll then see that you have three options:

Let's start by selecting Element Wrapper to have a place to build out our Stacked Sticky. You'll see that the wrapper has now been inserted in the Stacked Sticky element, and has an option again for a Friendly Name:

From the right side interface, you'll again see + ADD ELEMENT. Click that, and you'll be given the full list of elements that are available in your RebelMouse platform. For our example, we'll be using shared elements, but you can easily use any element that makes sense.

Our shared elements are simply prebuilt units, that have specific styling, and are set to pull content from specific sections. Here, we're pulling from Element Ad Slot, which will pull our advertisement post. Please note that the shared elements we are using for this example have been specifically created for this demonstration, and are not prebuilt on other sites.

This first element is the one that we will want to disappear after the four seconds assigned.

Our next step is to define the element that we want to stay on our page. For this, we will again select the Stacked Sticky element that we have placed in the left-hand side of the interface, select + ADD ELEMENT, but this time we will select the Pinned Area for Stacked Sticky. This will be the item that we want to stay after the previous item is removed:

We will now follow the same steps as above to add a wrapper, then a shared element. This time however, we will select our Element Breaking News, as we want our breaking news banner to stay visible, after our ad banner is removed:

We are now ready to go! We can simply click Save, add a message describing what we updated, and then click Save again. Let's go check out our work (be sure to keep an eye on the red banner at the top!):

Please note, it's always a best practice to make updates using an A/B test while you're working on something like this, so that you don't make a mistake and have it end up on the live page!

If you have any questions about this feature, please contact your account manager or email support@rebelmouse.com.

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:

animate
Layout and Design toolLayout and Design tool on mobile
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