email@encode8.com
CSSTutorials

Create Scroller Ads on Your Website in 2 Simple Steps

You may have seen scrolling ads on mobile devices where a single ad appears as you scroll down. It disappears after scrolling to a certain point. It’s a fairly new technique to catch readers’ attention. Here I am going to explain how this scroll ad feature works in two easy steps. Make sure you go through the explanation for the CSS to better grasp how this works.

What we will build

scroll ad
You can try the demo here. And the GitHub repositiory is here if you would like to contribute.

1. HTML

For the purpose of the demo, add these lines inside an html file, (probably index.html




    Scroll Ad

Let’s not worry about the container and content classes. Our attention should be on scrollad-container.

2. CSS

Let’s a create the style.css file which we linked above. Insert these lines:

.container {
    margin:5px auto;
    max-width:960px;
    display:grid;
    grid-template-columns: repeat(2,50%);
    grid-gap:10px;
}

.content {
    border:1px solid black;
    font-size:1.3rem;
    padding:10px;
    text-align:center;
    margin-top:5px;
    min-height:20vh;
    align-self:center;
}

.scrollad-container {
    grid-column:1 / span 2;
    background: #F9F2FA;
    min-height:100vh;
}

.img-ad {
    display:block;
    height: 20vh;
    width:100%;
    position:-webkit-sticky;
    position:sticky;
    top:40vh;
    background:green;
    margin:0 auto;
}

Here I created a grid of rows that contain two columns. I set width of .scrollad-container to 100% by setting grid-column property. (Your CSS may be different but make sure you set the width of .scrollad-container to 100% of its parent, whichever way you like.)

To better distinguish the ad container, I set the background color to a different one from the container background.

The height of this ad container is set to 100vh, i.e. 100% of the viewport height. Why? Because we want the reader to scroll the entire amount of the screen height before the ad disappears.

Now, about .img-ad, this is the actual advertisement (You can insert Adsense code or affiliate links inside it). The height of the ad is set to 20vh or 20% of view-port height. Width is set to 100% so that it matches the parent’s width.

Notice we have set position:sticky (or -webkit-position:sticky, for older browsers). This single line of code does the magic. With this property, we make sure that .img-ad element stays fixed as the reads scrolls down.

But, where do we want this to stay fixed? Ideally, for the most impact, it should be at the middle of the page. To achieve this, we set top:40vh. Let me explain why.

Recall that we have set the height of the ad to 20%. So the rest 80% should be filled with the background of .scrollad-container. We set 40vh at the top so that the ad stays exactly in the middle (rest 80% is divided into two, i.e. 40% each at the top and bottom)

Conclusion

Browser support for position:sticky is fairly okay. IE11 or lower does not support this CSS feature. But even if it doesn’t, this scroll ad will go away just as the reader scrolls down, just that it does not stay fixed.