使用CSS和JavaScript实现的网站粘性头部的代码

23 min read

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性头部示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="stickyHeader">我的粘性头部</header>
    <main>内容部分...</main>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）：

body {
    margin: 0;
    padding: 0;
}
#stickyHeader {
    background-color: #f1f1f1;
    padding: 15px;
    font-size: 20px;
    position: sticky;
    top: 0;
    z-index: 100;
}

JavaScript部分（script.js）：

JavaScript部分并不一定需要，因为CSS的position: sticky;就可以实现粘性头部的效果。但如果你想在滚动时添加一些额外的效果或行为，可以使用以下JavaScript代码：

window.onscroll = function() {
    var header = document.getElementById("stickyHeader");
    if (window.pageYOffset > 100) {
        header.style.backgroundColor = "#333";
    } else {
        header.style.backgroundColor = "#f1f1f1";
    }
};

这个例子中，当用户向下滚动100像素或更多时，头部的背景颜色会变成深灰色。当用户向上滚动，颜色又会变回原来的浅灰色。