要实现滚动时动态更换 logo 图片的效果，可以用 CSS 配合 JavaScript 来实现。基本思路是：
准备两张 logo 图片： 一张是默认显示的 logo，另一张是滚动到特定位置或超过特定距离后显示的 logo。
HTML 结构： 将两个 logo 图片都放在同一个容器元素中，例如 <div>，并分别设置不同的 class 或 id，用于后续 CSS 和 JavaScript 的操作。
CSS 样式：
默认情况下，将其中一张 logo 图片设置为显示，另一张设置为隐藏（可以使用 display: none;）。设置容器元素的样式，例如 position: relative;，以便后续使用绝对定位来控制 logo 图片的位置。JavaScript 控制：
监听页面的滚动事件。在滚动事件的处理函数中，判断滚动距离或当前位置是否满足条件。如果满足条件，则通过 JavaScript 修改两张 logo 图片的 CSS 样式，例如切换 display 属性的值，来实现 logo 的切换效果。下面是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>滚动切换 Logo</title>
<style>
body {
height: 2000px; /* 设置页面高度以便测试滚动效果 */
}
.logo-container {
position: relative;
width: 200px;
height: 100px;
}
.logo {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s ease-in-out; /* 添加过渡效果 */
}
.logo.hidden {
opacity: 0; /* 使用 opacity 实现淡入淡出效果 */
}
</style>
</head>
<body>
<div class="logo-container">
<img src="logo1.png" alt="Logo 1" class="logo">
<img src="logo2.png" alt="Logo 2" class="logo hidden">
</div>
<script>
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
var logoContainer = document.querySelector('.logo-container');
var logo1 = logoContainer.querySelector('img:first-child');
var logo2 = logoContainer.querySelector('img:last-child');
if (scrollTop > 100) {
logo1.classList.add('hidden');
logo2.classList.remove('hidden');
} else {
logo1.classList.remove('hidden');
logo2.classList.add('hidden');
}
});
</script>
</body>
</html> 代码解释：
HTML 中，logo1.png 是默认显示的 logo，logo2.png 是滚动后显示的 logo。CSS 中，.logo.hidden 类名用于隐藏 logo，并添加了 opacity 过渡效果。JavaScript 中，监听了 scroll 事件，根据滚动距离添加或移除 logo 的 hidden 类名，实现 logo 的切换。你可以根据自己的需求修改 CSS 样式和 JavaScript 代码，例如修改触发 logo 切换的滚动距离、添加动画效果等等。
网友回复
我知道答案，我要回答
私活外包
