Làm thế nào để - Thay đổi kích thước tiêu đề trên cuộn
Tìm hiểu cách thu nhỏ tiêu đề khi cuộn bằng CSS và JavaScript.
Cách thu nhỏ tiêu đề khi cuộn
Bước 1) Thêm HTML:
Tạo tiêu đề:
Thí dụ
<div id="header">Header</div>
Bước 2) Thêm CSS:
Tạo kiểu cho tiêu đề:
Thí dụ
#header {
background-color: #f1f1f1; /* Grey background */
padding: 50px 10px; /* Some padding */
color: black;
text-align: center; /* Centered text */
font-size: 90px; /* Big font
size */
font-weight: bold;
position: fixed; /* Fixed
position - sit on top of the page */
top: 0;
width: 100%;
/* Full width */
transition: 0.2s; /* Add a transition effect (when
scrolling - and font size is decreased) */
}
Bước 3) Thêm JavaScript:
Thí dụ
// When the user scrolls down 50px from the top of the document, resize the
header's font size
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";
}
}