网站的粘性标题的 CSS 和 JavaScript 代码
作者：野牛程序员：2024-03-01 08:41:40网页设计阅读 3102
以下是一个网站的粘性标题的 CSS 和 JavaScript 代码片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性标题示例</title>
<style>
/* 设置基本样式 */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* 标题栏样式 */
.header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
/* 内容样式 */
.content {
padding: 20px;
margin-top: 50px; /* 为内容添加顶部边距，防止被标题栏遮挡 */
}
</style>
<script>
// JavaScript部分，实现标题栏粘性效果
window.addEventListener('scroll', function() {
var header = document.querySelector('.header');
var scrollPosition = window.scrollY;
if (scrollPosition > 50) {
header.classList.add('sticky');
} else {
header.classList.remove('sticky');
}
});
</script>
</head>
<body>
<!-- 标题栏 -->
<div>粘性标题</div>
<!-- 内容部分 -->
<div>
<h1>标题</h1>
<p>内容</p>
<!-- 更多内容 -->
</div>
</body>
</html>这段代码实现了一个简单的网站页面，其中的标题栏（header）在用户向下滚动页面时变为粘性，保持在页面顶部。CSS 控制了标题栏的样式和位置，而JavaScript监听页面滚动事件，并在滚动位置超过一定阈值时添加了一个 .sticky 类，使得标题栏固定在页面顶部。
野牛程序员教少儿编程与信息学奥赛-微信|电话：15892516892
