Hiệu ứng scroll menu active hướng dẫn

I want to add a class active to the current menu item on scroll and click. It’s a single [long] page with different sections. When click on an item, the active state should switch to the current one.

I came up with the following code, but doesn’t now how I can integrate the above:

// Click event
    $['
# primary-navwrapper li a[href^="#"]'].click[function[event] {
        // Prevent from default action to intitiate
        event.preventDefault[];
        // The id of the section we want to go to
        var anchorId = $[this].attr['href'];
        // Our scroll target : the top position of the section that has the id referenced by our href
        var target = $[anchorId].offset[].top - offset;
        console.log[target];
        $['html, body'].stop[].animate[{ scrollTop: target }, 500, function [] {
            window.location.hash = anchorId;
        }];
        return false;
    }];

Home     News     Contact

    

Cố định thanh menu khi cuộn trang

    

Website

   

Nội dung website ...

    

Cuộn trang để cố định thanh menu

   

...

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ụ

// 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 title vào các liên kết var i, links; links = document.getElementsByClassName['links']; for[i = 0; i < links.length; i++] {     links[i]. title = addActive; } // Tìm phần tử có id=openDefault và click vào document.getElementById['openDefault'].click[];

Xem kết quả

Chủ Đề