How to Correctly Add and Remove jQuery Classes Based on Vertical Scroll?

Add and Remove jQuery Class Based on Vertical Scroll

In this scenario, the user wants to remove the "clearHeader" class from the "header" element and replace it with the "darkHeader" class as the user scrolls down, modifying its appearance. However, the provided code isn't functioning correctly.

Let's analyze the original code:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();    
    if (scroll <= 500) {
        $(".clearheader").removeClass("clearHeader").addClass("darkHeader");
    }
}

Apart from a few minor adjustments, there are two significant issues:

• Incorrect Operator: The comparison operator should be ">=" instead of "<=" to correctly identify when to change the class.
• Selector Error: The selector ".clearheader" is incorrect as it contains a lowercase "H." The correct selector should be ".clearHeader."

Here's the revised code addressing these errors:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".clearHeader").removeClass("clearHeader").addClass("darkHeader");
    }
});

Additionally, it's recommended not to remove the "clearHeader" class because it's responsible for fixating the header. Instead, apply a new CSS class to modify the styling.

Furthermore, if you intend to restore the "clearHeader" class as the user scrolls back up, implement this code:

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 500) {
        $(".clearHeader").addClass("darkHeader");
    } else {
        $(".clearHeader").removeClass("darkHeader");
    }
});

To enhance performance and avoid repeatedly querying the DOM, consider caching the header selector:

$(function() {
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

The above is the detailed content of How to Correctly Add and Remove jQuery Classes Based on Vertical Scroll?. For more information, please follow other related articles on the PHP Chinese website!