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;
    });

halfer

20.2k19 gold badges104 silver badges191 bronze badges

asked Nov 22, 2014 at 18:34

To add active class on click is simple using jQuery. You just need this code in the click handler

//remove active from all anchor and add it to the clicked anchor
        $('
# primary-navwrapper li a[href^="#"]').removeClass("active")
        $(this).addClass('active');

And for the scroll part you need to monitor the position of the scroll bar and compare it with every page offset like so

Bạn muốn có một menu được gắn cố định khi ở, nhưng khi cuộn đến vị trí menu, nó sẽ dính luôn lên đầu trang và chạy theo trang? Vậy thì đây chính là thứ bạn cần!

Trong bài viết này, tôi sẽ hướng dẫn bạn làm một menu sticky đơn giản với sự hỗ trợ của jquery, nó có thể chạy trên hầu hết các web dùng jquery nên bạn có thể tái sử dụng rất dễ dàng (tức là không phải code lại ấy

Bắt đầu nào!

Với trường hợp menu ở ngay trên đầu trang thì dễ rồi, bạn chỉ cần để css của nó là position: fixed rồi vã như bình thường là xong.

Ở bài này, tôi sẽ chỉ nói đến trường hợp menu cách cạnh trên màn hình một khoảng.

Có 2 vấn đề chính phải xử lý trong trường hợp này:

1. Khi nào đổi menu từ cố định sang fixed và ngược lại?
2. Khi đổi qua lại giữ cố định và fixed, trang sẽ bị giật nhẹ do vị trí menu trước đó biết mất hoặc ngược lại. Cần xử lý điều này thế nào?

1. Khi nào đổi menu từ cố định sang fixed và ngược lại?

Cái này dễ, bạn đo khoảng cách từ đầu trang đến menu: sticky = menu.offset().top

Rồi check nếu cuộn màn hình đến vị trị menu thì đổi nó qua sticky với $(window).scrollTop() >= sticky

Vị trí của màn hình cần được kiểu tra liên tục mỗi khi thay đổi bằng cách dùng $(window).on('scroll', function () {}); của jquery

2. Xử lý giật trang khi đổi trạng thái

Trường hợp này thì bạn có thể đặt 1 tag bao ngoài cho menu, rồi gắn height bằng với menu. Cách này thì đối khi lỗi với trường hợp menu có dropdown.

Trong trường hợp của tôi, tôi sẽ dùng đẩy 1 tag với height bằng menu vào vị trị ngay dưới menu khi nó chuyển sang fixed và xoá nó đi khi nó đổi lại trạng thái bình thường. Một pha xử lý "cồng kềnh" nhưng đến giờ tôi vẫn thấy nó hiệu quá

Thêm tag: menu.after('

Xoá tag:

.sticky {
  width: 100%;
  top: 0;
  left: 0;
  position: fixed;
  transition: all 1s;
}

0

Hoàn thiện

Sau khi xử lý được 2 vấn đề lại thì chỉ còn lại việc đơn giản là đẩy cho nó 1 class và css theo vị trí đó.

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

Xem kết quả

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ụ

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ụ

Xem kết quả