How TO - 滾動時調整頁首大小
瞭解如何使用 CSS 和 JavaScript 在滾動時收縮頁首。
如何在滾動時收縮頁首
步驟 1) 新增 HTML
建立一個頁首
示例
<div id="header">頁首</div>
步驟 2) 新增 CSS
設定頁首樣式
示例
#header {
background-color: #f1f1f1; /* 灰色背景 */
padding: 50px 10px; /* 一些內邊距 */
color: black;
text-align: center; /* 居中對齊的文字 */
font-size: 90px; /* 大號字型 */
font-weight: bold;
position: fixed; /* 固定定位 - 位於頁面頂部 */
top: 0;
width: 100%; /* 全寬度 */
transition: 0.4s; /* 新增過渡效果（滾動時 - 字型大小減小） */
}
步驟 3) 新增 JavaScript
示例
// 當用戶從文件頂部向下滾動 50px 時，調整頁首的字型大小
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("header").style.fontSize = "30px";
} else {
document.getElementById("header").style.fontSize = "90px";
}
}
自己動手試一試 »
