Thêm và xóa các lớp ở các độ cao khác nhau trên trang bằng cách sử dụng jQuery

Question

Tôi muốn xóa/thêm các lớp khi người dùng ở các khoảng cách khác nhau từ trên cùng bằng cách sử dụng jQuery.

Tôi đã thực hiện thành công nó, và nó hoạt động tốt, nhưng tôi nghĩ rằng tôi đang làm điều đó sai, và tôi muốn giúp đỡ của bạn để tối ưu hóa mã.

html đơn giản, về cơ bản các phần (bao gồm tiêu đề), có chiều rộng 100%. và màu sắc khác nhau. Tôi muốn làm cho màu sắc thay đổi tiêu đề khi nó trên phần đầu tiên (cho mục đích thẩm mỹ). Và tôi cũng muốn nó có bóng khi trang được cuộn nhiều hơn 1 pixel.

Tôi đang làm điều đó bằng cách thêm/xóa lớp học.

Khi tôi sử dụng một câu lệnh khác nếu câu lệnh không hoạt động tốt vì bất kỳ khi nào bất kỳ điều kiện nào khớp với js đều dừng kiểm tra các trận đấu khác, vì vậy nó không áp dụng tất cả các lớp cần thiết.

Mã tiếp theo hoạt động, tuy nhiên như tôi đã nói, tôi nghĩ rằng đó không phải là tối ưu/viết xấu. Dưới đây là đánh dấu HTML:

<header class="dark no-shadow"> 
    Header 
</header> 
<section class="blue"> 
    Please Scroll Down to see the header changes... 
</section> 
<section> 
    The header color Should change when you pass through me. 
</section> 

Và đây là đoạn code jQuery: (! Như tôi)

var header = $('header'), 
     blueSection = $('section.blue'), 
    // Calculate when to change the color. 
     offset = blueSection.offset().top + blueSection.height() - header.height(); 

$(window).scroll(function(){ 
    var scroll = $(window).scrollTop(); 

    // Remove Class "dark" after scrolling over the dark section 
    if (scroll >= offset) { 
    header.removeClass('dark'); 
    } else { 
    header.addClass('dark'); 
    } 

    // Remove Class "no-shadows" whenever not on the top of the page. 
    if (scroll >= 1) { 
    header.removeClass('no-shadow'); 
    } else { 
    header.addClass('no-shadow'); 
    } 

}); 

Và đối với những người thích sử dụng jsfiddle: https://jsfiddle.net/shock/wztdt077/6/

Cảm ơn các bạn!

Answer 1

Here là những gì tôi đã đi lên với:

var header = $('header'), 
    blueSection = $('section.blue'), 
    // Calculate when to change the color. 
    offset = blueSection.offset().top + blueSection.height() - header.height(); 

var add = function(obj, cls) {obj.addClass(cls);} 
var remove = function(obj, cls) {obj.removeClass(cls);} 

var stylePoints = [offset, 1,   100, 200]; 
var styleTo =  ['dark', 'no-shadow', 'blue', 'tall']; 
var styleType = [add, add,   remove, remove]; 

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    for (i = 0; i < stylePoints.length; i++) { 
    var func = styleType[i]; 
    if (scroll >= stylePoints[i]) 
     (styleType[i] == add) ? remove(header, styleTo[i]) : add(header, styleTo[i]); 
    else func(header, styleTo[i]); 
    } 
}); 

Nó không phải là dài hơn nhiều so với jQuery hiện tại của bạn, và cho phép (trên lý thuyết) vô số thay đổi phong cách mà không cần phải thêm một triệu dài các câu lệnh if/else. Để thêm một thay đổi kiểu mới, bạn phải thêm một giá trị vào cuối mỗi mảng. stylePoints chỉ định giá trị scrollTop() mà tại đó một kiểu phải được thêm hoặc xóa. styleTo chỉ định lớp sẽ được thêm hoặc xóa. styleType chỉ định liệu lớp này sẽ được thêm hoặc xóa khi người dùng được cuộn ở trên giá trị stylePoints tương ứng. Điều ngược lại sẽ xảy ra khi người dùng được cuộn bên dưới hoặc tại giá trị stylePoints tương ứng. Ví dụ: bạn có thể thấy từ mã rằng lớp tall sẽ là remove d từ header khi người dùng được cuộn trên 200 và thêm khi người dùng được cuộn xuống dưới hoặc tại 200.