如何在你的网站上实施粘性广告

如何在你的网站上实施粘性广告

在这篇文章中,我们将学习如何在我们的网站上实现粘性广告。我们可以使用各种jQuery插件在网页上添加一个粘性元素。我们将使用sticky-kit的jQuery插件。

方法:让我们看看sticky-kit插件是否能帮助我们使一个HTML元素粘在其父元素上。通过这种方式,我们可以将一个HTML div元素粘在它的父元素上,在子div中,我们将放置我们的广告。当我们在整个网站上滚动时,子div标签将附着在其父元素上。

首先,我们必须在HTML文件的头部标签中添加jQuery和sticky-kit jQuery插件的CDN链接。

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>

例子1:在这个例子中,我们要做一个三部分的网页,包含一个标题、主体和页脚部分。在主体部分,我们将添加一个div部分,在这个部分上将实现粘性功能。它将在滚动页面时粘住它。我们可以从以下代码的输出中看到这一点。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Sticky ads using jquery</title>
  
    <!-- CDN link for jquery -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"      
           crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
  
    <!-- CDN link for sticky-kit jquery plugin -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"        
        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>

输出 :

如何在你的网站上实施粘性广告?

例子2:让我们通过另一个互动例子来看看粘性广告的作用。在这种情况下,我们在一个演示网页上并排使用两个广告,广告的父元素在body标签中,因此它们与其他HTML元素完全分开。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Sticky ads using jquery</title>
    <!-- CDN link for jquery -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"       
        crossorigin="anonymous" referrerpolicy="no-referrer">
    </script>
  
    <!-- CDN link for sticky-kit jquery plugin -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"        
        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>

输出:

如何在你的网站上实施粘性广告?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程