Sticky Ads with HTML and CSS.

27 / Feb / 2024 by Rajan . 0 comments

Today, digital advertising is growing at a faster pace. Therefore, lots of clients want to sell ads on the website.

What are sticky ads?

Sticky ads are ads that stay visible while the user scrolls through the content of the web page. There are two types of sticky ads horizontal and vertical sticky ads.

Horizontal ads:

These ads have a landscape view, and they are mostly displayed on the top, middle, and bottom of the page.

Vertical ads:

These are portrait view ads and they're placed vertically on the sidebar of the webpage. When the user scrolls through the content, they stick to the webpage in the given position.

Sticky ads with HTML and CSS:

With the help of CSS position: sticky, we can create sticky elements on a webpage.  It is very simple and straightforward CSS.

Here is the HTML and CSS code for vertical ads:

HTML for ads

CSS code:

CSS for sticky ads

Here is the jsfiddle link for vertical ads with a working demo:  https://jsfiddle.net/zkLw8ayd/9/

Sometimes clients want there ads to be in the middle of the contents, so we need to create horizontal ads (Landscape View).

Here we have a code for horizontal ads:

landscape sticky

CSS code for horizontal ads:

CSS for Landscape view

In the upper CSS code, sticky ads in the middle of the content are not working. This is because, most of the time, beginners give the same height to both the parent and child elements. Therefore, there is no room left for the sticky position. So whenever we use the sticky position on the child element, make sure the child’s parent is taller than the child. So that it gives the child element room to be sticky to its parent.

CSS for the sticky nested child element:

.p-static{
  position: static;
  padding: 100px 0;
  height:1000px;
}

Here is the CSS jsfiddle link for Nested Child element content sticky ads: https://jsfiddle.net/sdkf1qro/1/

FOUND THIS USEFUL? SHARE IT

Leave a Reply

Your email address will not be published. Required fields are marked *