知识问答
如何利用JavaScript实现网页侧边随页面滚动的广告效果？
2025-09-21 15:33:11
来源：互联网转载
要实现网页侧边随页面滚动的广告效果，可以使用JavaScript**页面滚动事件，然后根据滚动距离动态调整广告元素的位置。以下是一个简单的示例代码：，，``
html，，，，，，侧边随页面滚动广告效果，， #ad {， position: fixed;， top: 50%;， left: 0;， transform: translateY(-50%);， width: 100px;， height: 200px;， background-color: rgba(0, 0, 0, 0.5);， color: #fff;， padding: 20px;， box-sizing: border-box;， }，，，，，，， window.addEventListener('scroll', function() {， const ad = document.getElementById('ad');， const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;， ad.style.top = ${scrollTop + 50}px;， });，，，，`，，这段代码中，我们创建了一个名为ad的p`元素作为广告，并使用CSS设置了其样式。在JavaScript部分，我们**了页面的滚动事件，并在事件处理函数中根据滚动距离动态调整广告元素的位置。实现网页侧边随页面滚动广告效果的JavaScript技巧
1. 创建HTML结构
我们需要在HTML中创建一个广告容器和一个内容区域，广告容器将包含我们的广告内容，而内容区域则包含我们的主要页面内容。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Side Ad Scrolling</title> <link rel="stylesheet" href="styles.css"></head><body> <p id="content"> <!-Your main page content goes here --> </p> <p id="ad"> <!-Your ad content goes here --> </p> <ｓｃｒｉｐｔ src="ｓｃｒｉｐｔ.js"></ｓｃｒｉｐｔ></body></html>
2. 设置CSS样式
我们需要为广告容器和内容区域设置一些基本的CSS样式，我们将使用position: fixed来固定广告容器的位置，并设置其宽度和高度。
/* styles.css */body { margin: 0; padding: 0;}#content { width: 75%; /* Adjust this value based on your design */ margin-left: 25%; /* Adjust this value based on your design */ padding: 20px;}#ad { position: fixed; top: 0; right: 0; width: 25%; /* Adjust this value based on your design */ height: 100%; background-color: #f9f9f9; /* Adjust this color based on your design */ overflow: auto; padding: 20px;}3. 添加JavaScript代码
我们需要编写JavaScript代码来实现广告容器随页面滚动的效果，我们可以使用window.onscroll事件**器来检测页面滚动，并根据滚动位置调整广告容器的位置。
// ｓｃｒｉｐｔ.jswindow.onscroll = function() { var ad = document.getElementById('ad'); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; ad.style.top = scrollTop + 'px';};问题与解答
问题1：如何使广告容器在页面顶部时保持固定？
解答：在上面的JavaScript代码中，我们已经使用了window.onscroll事件**器来检测页面滚动，当页面滚动时，我们通过获取window.pageYOffset或document.documentElement.scrollTop的值来获取当前滚动的距离，并将这个值设置为广告容器的top属性，这样，广告容器就会随着页面的滚动而移动。
问题2：如何让广告容器在页面底部时消失？
解答：要让广告容器在页面底部时消失，我们可以在JavaScript代码中添加一个条件判断，当页面滚动到一定距离（页面总高度减去窗口高度）时，我们可以将广告容器的display属性设置为none，以下是修改后的JavaScript代码：
window.onscroll = function() { var ad = document.getElementById('ad'); var scrollTop = window.pageYOffset || document.documentElement.scrollTop; var windowHeight = window.innerHeight; var documentHeight = document.documentElement.scrollHeight; if (scrollTop + windowHeight >= documentHeight) { ad.style.display = 'none'; } else { ad.style.display = 'block'; ad.style.top = scrollTop + 'px'; }};小伙伴们，上文介绍了“js网页侧边随页面滚动广告效果实现-javascript技巧”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
上一篇：有哪些云盘资源论坛
