如何创建 - 滚动标题
了解如何使用 CSS 和 JavaScript 在滚动时创建固定/粘性标题。
如何在 Scroll 上创建固定页眉
步骤 1) 添加 HTML:
实例
<div class="header" id="myHeader">
<h2>My Header</h2>
</div>
步骤 2) 添加 CSS:
实例
/* 设置标题样式 */
.header {
padding:
10px 16px;
background: #555;
color: #f1f1f1;
}
/* 页面内容 */
.content {
padding: 16px;
}
/* Sticky 类在到达滚动位置时用 JS 添加到 header */
.sticky {
position: fixed;
top: 0;
width: 100%
}
/* 为页面内容添加一些顶部填充以防止突然快速移动(因为标题在页面顶部获得新位置(位置:固定和顶部:0)*/
.sticky + .content {
padding-top: 102px;
}
步骤 3) 添加 JavaScript:
实例
// 当用户滚动页面时,执行 myFunction
window.onscroll = function() {myFunction()};
// 获取标题
var header = document.getElementById("myHeader");
// 获取导航栏的偏移位置
var sticky = header.offsetTop;
// 当到达滚动位置时,将粘性类添加到标题。 离开滚动位置时删除 "sticky"
function myFunction() {
if (window.pageYOffset
> sticky) {
header.classList.add("sticky");
}
else {
header.classList.remove("sticky");
}
}
亲自试一试 »