Open In App

How to implement Sticky Ads in your website ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how we can implement Sticky Ads on our website.  We can add a sticky element on the web page using various jQuery plugins. We will use the sticky-kit jQuery plugin.

Approach: let us see if the sticky-kit plugin will help us to make an HTML element stick to its parent. In this way, we can stick an HTML div element to its parent element and in the child div, we will place our advertisement. The child div tag will be attached to its parent while we will be scrolling throughout the website.

First, we have to add CDN links for jQuery and sticky-kit jQuery plugin in the head tag of HTML file.

CDN links:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js”  crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js”  crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>

Example 1: In this example, we are going to make a three-section webpage containing a header, main body, and footer section. In the main body, we will add a div section on which the sticky feature will be implemented. It will stick to it while scrolling the page. We can see this in the output of the following code.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Sticky ads using jquery</title>
  
    <!-- CDN link for jquery -->
    <script src=
           crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
  
    <!-- CDN link for sticky-kit jquery plugin -->
    <script src=
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
  
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
  
        #ad {
            height: 400px;
            width: 200px;
            background-color: rgb(137, 137, 137);
            position: absolute;
            top: 100px;
            left: 5px;
            display: flex;
            justify-content: center;
        }
  
        #page1 {
            background-color:#FFFF;
            height: 100px;
            display: flex;
            justify-content: center;
        }
  
        #page2 {
            background-color: rgb(225, 222, 2);
            height: 200vh;
            display: flex;
            flex-direction: column;
  
        }
  
        #page3 {
            background-color: rgb(4, 115, 117);
            height: 150px;
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>    
    <!-- Header section -->
    <div id="page1">
        <h1 style="color:green;">
              GeeksforGeeks
          </h1>
    </div>
    <!-- Main body page -->
    <div id="page2">
        <!-- This is ad -->
        <div id="ad" class="sidebar">
            This is an Ad.
        </div>
    </div>
  
    <!-- Footer section -->
    <div id="page3">
        <h1>Footer</h1>
    </div>
  
    <!-- jQuery script  -->
    <script>
        $(document).ready(function () {
            $(".sidebar").stick_in_parent();
        });
    </script>
</body>
</html>


Output :

 

Example 2: Let’s see the sticky ads in action with another interactive example. In this case, we are using two ads for a demo webpage side by side and the parent element for that ads are in the body tag so that they are completely separated from the rest of the HTML element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Sticky ads using jquery</title>
    <!-- CDN link for jquery -->
    <script src=
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
  
    <!-- CDN link for sticky-kit jquery plugin -->
    <script src=
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
   <style>
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
  
        #ad1 {
            height: 200px;
            width: 100px;
            background-color: grey;
            position: absolute;
            top: 200px;
            left: 5px;
            display: flex;
            justify-content: center;
        }
  
        #ad2 {
            height: 200px;
            width: 100px;
            background-color: grey;
            position: absolute;
            top: 200px;
            right: 5px;
            display: flex;
            justify-content: center;
        }
  
        .mainpage {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            flex-direction: column;
            height: 200vh;
        }
  
        .header {
            background-color: rgb(44, 44, 44);
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60%;
        }
  
        .footer {
            background-color: rgb(32, 32, 32);
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60%;
        }
  
        .section {
            height: 50vh;
            background-color: rgb(210, 210, 210);
            width: 60%;
            border-radius: 5px;
            border: 10px solid white;
        }
    </style>
</head>
<body>
    <div id="ad1" class="sidebar">
        This is an Ad.
    </div>
    <div id="ad2" class="sidebar">
        This is an Ad.
    </div>
  
    <div class="mainpage">
        <div class="header">
            <h1 style="color:green;">
                  GeeksforGeeks
              </h1>
        </div>
        <div class="section">
            <h1 style="color:green">Section 1</h1>
        </div>
        <div class="section">
            <h1 style="color:green">Section 2</h1>
        </div>
        <div class="section">
            <h1 style="color:green">Section 3</h1>
        </div>       
        <div class="footer">
            <h1 style="color:green">footer</h1>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(".sidebar").stick_in_parent();
        });
    </script>
</body>
</html>


Output:

 



Last Updated : 23 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads