原生JS实现网页顶部自动下拉/收缩广告效果

在网页中引入广告是一种常见的商业模式，但过于显眼的广告可能会影响用户体验。因此，实现一个可以自动下拉和收缩的广告效果，既可以展示广告内容，又不会影响用户正常浏览网页。

本文将介绍如何使用原生JavaScript实现这个功能，包括代码实现和详细说明。通过学习这个例子，您将了解到如何运用JavaScript控制DOM元素，并且在实际应用中可以灵活运用这些技能。

实现思路

当页面滚动到一定位置时，显示广告。
点击关闭按钮，隐藏广告。
添加按钮悬浮效果，增强交互体验。

HTML结构

我们假设一个顶部广告栏位于页面的头部。

---- ---------------
  ---- ----------------------------
  ---- ---- ---
------

其中，.banner 为广告整体容器，.banner-close 为关闭按钮。

CSS样式

对广告进行初始化的CSS样式：

------- -
  ------ -----
  ------- --
  --------- -------
  --------- ------
  ---- --
  ----- --
  ----------- --- ---- ------------
  -------- -----
-

-------------- -
  ------- ------ -- ---- --
-

------------- -
  --------- ---------
  ---- --
  ------ --
  -------- ----
  ------- --------
-

JavaScript代码

-- ----
----- ------ - ----------------------------------
----- -------- - ----------------------------------------

-- -----
--- --------------- - ------

-- --------
--------------------------------- -- -- -
  ----- --------- - ------------------ -- -----------------------------------
  -- ---------- -- --- -- ----------------- -
    -- -----------------
    -------------------------------
    --------------- - -----
  - ---- -- ---------- - --- -- ---------------- -
    -- -------------
    ----------------------------------
    --------------- - ------
  -
---

-- -----------
---------------------------------- -- -- -
  ----------------------------------
  --------------- - ------
---

首先，我们获取了广告的元素节点和关闭按钮的元素节点。然后，我们初始化一个布尔类型的变量 isBannerVisible 来跟踪广告是否可见。

在滚动事件中，通过 window.pageYOffset || document.documentElement.scrollTop 获取当前页面滚动的高度。当页面滚动到200px时，将广告容器添加 .active 类，从而实现下拉效果。当页面滚动回顶部时，移除 .active 类，隐藏广告。

在点击关闭按钮时，我们同样移除 .active 类，并设置 isBannerVisible 变量为 false。

增强交互体验

我们可以通过CSS和JavaScript来增强交互体验。以下是一个简单的例子：

------------------- -
  ----------------- -----
-

------------- -
  ------- ------ -- ---- --
-

当鼠标悬停在关闭按钮上时，背景色会发生变化，提示用户该按钮可以点击。

当鼠标悬停在广告容器上时，容器的高度会扩展到200px，以提供更多的广告展示空间。

总结

在本文中，我们介绍了如何使用原生JavaScript实现网页顶部自动下拉/收缩广告效果。通过学习这个

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/938

原生js实现网页顶部自动下拉/收缩广告效果