<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <title>滚动吸顶+淡入淡出</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } /* 吸顶元素 */ .sticky-header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; line-height: 60px; text-align: center; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); font-size: 18px; z-index: 999; /* 默认隐藏 + 过渡动画 */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } /* 显示状态 */ .sticky-header.show { opacity: 1; visibility: visible; } /* 页面长内容 */ .content { height: 150px; line-height: 150px; text-align: center; background: #f5f5f5; margin: 10px 0; } </style> </head> <body> <!-- 滚动后固定在顶部的元素 --> <div class="sticky-header" id="stickyBox"> 我是固定在顶部的内容 </div> <!-- 页面内容 --> <div class="wrap"> <div class="content">内容 1</div> <div class="content">内容 2</div> <div class="content">内容 3</div> <div class="content">内容 4</div> <div class="content">内容 5</div> <div class="content">内容 6</div> <div class="content">内容 7</div> <div class="content">内容 8</div> <div class="content">内容 9</div> <div class="content">内容 10</div> </div> <script> const stickyBox = document.getElementById('stickyBox'); // 滚动超过 100px 触发吸顶 const triggerDistance = 100; window.addEventListener('scroll', function () { const scrollTop = window.scrollY || document.documentElement.scrollTop; if (scrollTop > triggerDistance) { stickyBox.classList.add('show'); } else { stickyBox.classList.remove('show'); } }); </script> </body> </html>
