thực hành - cố định menu khi cuộn trang

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo thanh menu điều hướng "cố định" bằng HTML, CSS và JavaScript.

Cố định menu khi cuộn trang

Tạo thanh menu cố định khi cuộn trang

Bước 1) Thêm HTML:

Tạo thanh điều hướng.

Ví dụ

<div id="header">
    <h2>Cố định menu khi cuộn trang</h2>
    <p>Cuộn trang để xem hiệu ứng sticky</p>
</div>
<div class="menu" id="Menu">    
    <a class="links" href="javascript:void(0)" id="openDefault">Home</a>
    <a class="links" href="javascript:void(0)">News</a>
    <a class="links" href="javascript:void(0)">Contact</a>
</div>
<div class="content">
    <h2>Cố định thanh menu khi cuộn trang</h2>
    <h2>Website</h2>
    <p>Nội dung website ...</p>
    <p>Cuộn trang để cố định thanh menu</p>
    <p>...</p>
</div>

Bước 2) Thêm CSS:

Tạo kiểu cho thanh điều hướng.

Ví dụ

/* Tạo kiểu cho vùng chứa header */
#header {
    background-color:#ddd;
    text-align:center;    
    padding:50px 0;
}
/* Tạo kiểu vùng chứa các liên kết menu */
.menu {
    background-color:black;
    overflow:hidden;
    width:100%;    
}
/* Tạo kiểu cho các liên kết */
.menu a {
    float:left;
    font-size:18px;
    color:white;
    text-decoration:none;
    text-align:center;
    padding:12px 14px;
}
/* Thay đổi màu nền khi di chuột */
.menu a:hover:not(.active) {
    background-color:#999;    
}
/* Thay đổi border khi liên kết đang kích hoạt */
.menu a.active {
    background-color:#428bca;
    color:white;    
}
/* Tạo kiểu cho nội dung chính */
.content {
    padding:20px;
    height:2000px;
}
/* Tạo kiểu cho lớp cố định sticky */
.sticky {
    position:fixed;
    top:0;
    left:0;
    width:100%;    
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
// Add sự kiện cuộn trang trong đối tượng window
window.onscroll = function() {stickyMenu()};

// Định nghĩa hàm khi sự kiện cuộn trang được kích hoạt
var menu, sticky;
menu = document.getElementById('Menu');
sticky = menu.offsetTop;

function stickyMenu() {
    if(window.pageYOffset >= sticky) {
        menu.classList.add("sticky");
    }else{
        menu.classList.remove("sticky");    
    }
}

// Định nghĩa hàm add và remove lớp active
function addActive(x) {
    
    // Khai báo các biến
    var i, links;
    
    // Xóa các lớp active
    links = document.getElementsByClassName('links');
    for(i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
    x.currentTarget.className += " active";    
}

// Gán sự kiện onclick vào các liên kết
var i, links;
links = document.getElementsByClassName('links');
for(i = 0; i < links.length; i++) {
    links[i].onclick = addActive;
}

// Tìm phần tử có id=openDefault và click vào
document.getElementById('openDefault').click();
</script>