Javascript 使用基于垂直滚动的jquery添加/删除类？

因此，基本上，我希望在用户向下滚动一点后，从“header”中删除该类，并添加另一个类来更改其外观

试图找出最简单的方法，但我无法让它工作

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

HTML

---

我肯定我做错了一些非常基本的事情。

这个值是故意的吗<代码>如果（滚动此值是否为预期值？

如果（滚动

编辑：以下是缓存标头选择器的版本-性能更好，因为它不会在每次滚动时查询DOM，并且您可以安全地将任何类删除/添加到标头元素，而不会丢失引用：

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});



编辑：以下是缓存标头选择器的版本-性能更好，因为它不会在每次滚动时查询DOM，并且您可以安全地将任何类删除/添加到标头元素，而不会丢失引用：

$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('clearHeader').addClass("darkHeader");
        } else {
            header.removeClass("darkHeader").addClass('clearHeader');
        }
    });
});

如果您愿意，可以添加一些过渡效果：


如果愿意，可以添加一些过渡效果：


这是我的密码

jQuery(document).ready(function(e) {
    var WindowHeight = jQuery(window).height();

    var load_element = 0;

    //position of element
    var scroll_position = jQuery('.product-bottom').offset().top;

    var screen_height = jQuery(window).height();
    var activation_offset = 0;
    var max_scroll_height = jQuery('body').height() + screen_height;

    var scroll_activation_point = scroll_position - (screen_height * activation_offset);

    jQuery(window).on('scroll', function(e) {

        var y_scroll_pos = window.pageYOffset;
        var element_in_view = y_scroll_pos > scroll_activation_point;
        var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

        if (element_in_view || has_reached_bottom_of_page) {
            jQuery('.product-bottom').addClass("change");
        } else {
            jQuery('.product-bottom').removeClass("change");
        }

    });

});

jQuery（文档）.ready（函数（e）{
var WindowHeight=jQuery（window）.height（）；
var load_元素=0；
//元素位置
var scroll_position=jQuery（'.product bottom'）.offset（）.top；
var screen_height=jQuery（window.height（）；
var激活_偏移=0；
var max_scroll_height=jQuery（'body'）.height（）+屏幕高度；
变量滚动激活点=滚动位置-（屏幕高度*激活偏移）；
jQuery（窗口）.on（'scroll'，函数（e）{
变量y_scroll_pos=window.pageYOffset；
视图中的变量元素=y滚动位置>滚动激活点；
var已到达页面的底部=最大滚动高度其我的代码

jQuery(document).ready(function(e) {
    var WindowHeight = jQuery(window).height();

    var load_element = 0;

    //position of element
    var scroll_position = jQuery('.product-bottom').offset().top;

    var screen_height = jQuery(window).height();
    var activation_offset = 0;
    var max_scroll_height = jQuery('body').height() + screen_height;

    var scroll_activation_point = scroll_position - (screen_height * activation_offset);

    jQuery(window).on('scroll', function(e) {

        var y_scroll_pos = window.pageYOffset;
        var element_in_view = y_scroll_pos > scroll_activation_point;
        var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

        if (element_in_view || has_reached_bottom_of_page) {
            jQuery('.product-bottom').addClass("change");
        } else {
            jQuery('.product-bottom').removeClass("change");
        }

    });

});

jQuery（文档）.ready（函数（e）{
var WindowHeight=jQuery（window）.height（）；
var load_元素=0；
//元素位置
var scroll_position=jQuery（'.product bottom'）.offset（）.top；
var screen_height=jQuery（window.height（）；
var激活_偏移=0；
var max_scroll_height=jQuery（'body'）.height（）+屏幕高度；
变量滚动激活点=滚动位置-（屏幕高度*激活偏移）；
jQuery（窗口）.on（'scroll'，函数（e）{
变量y_scroll_pos=window.pageYOffset；
视图中的变量元素=y滚动位置>滚动激活点；
对于Android mobile$（窗口）。scroll（函数（）和$（文档）。scroll（函数（）可能工作，也可能不工作。因此，请改用以下方法

jQuery(document.body).scroll(function() {
        var scroll = jQuery(document.body).scrollTop();

        if (scroll >= 300) {
            //alert();
            header.addClass("sticky");
        } else {
            header.removeClass('sticky');
        }
    });

这段代码对我很有用。希望它能帮助你。
适用于Android mobile$（窗口）。滚动（函数（）和$（文档）。滚动（函数（）可能有效，也可能无效。因此，请改用以下命令

jQuery(document.body).scroll(function() {
        var scroll = jQuery(document.body).scrollTop();

        if (scroll >= 300) {
            //alert();
            header.addClass("sticky");
        } else {
            header.removeClass('sticky');
        }
    });

这段代码对我很有用。希望它能对您有所帮助。
在类似的情况下，我希望避免由于性能问题总是调用addClass或removeClass。我已将scroll handler函数拆分为两个单独的函数，根据当前状态使用。我还根据本文添加了一个debounce功能：

var$header=jQuery（“.clearHeader”）；
var-appScroll=appScrollForward；
var appScrollPosition=0；
var scheduledAnimationFrame=false；
函数appScrollReverse（）{
scheduledAnimationFrame=false；
如果（应用滚动位置>500）
返回；
$header.removeClass（“darkHeader”）；
appScroll=appScrollForward；
}
函数appScrollForward（）{
scheduledAnimationFrame=false；
如果（位置<500）
返回；
$header.addClass（“darkHeader”）；
appScroll=appScrollReverse；
}
函数appScrollHandler（）{
appScrollPosition=window.pageYOffset；
if（scheduledAnimationFrame）
返回；
scheduledAnimationFrame=true；
requestAnimationFrame（appScroll）；
}
jQuery（窗口）.scroll（appScrollHandler）；

可能有人觉得这很有帮助。
在类似的情况下，我希望避免由于性能问题总是调用addClass或removeClass。我已将scroll handler函数拆分为两个单独的函数，根据当前状态使用。根据本文，我还添加了一个debounce功能：

var$header=jQuery（“.clearHeader”）；
var-appScroll=appScrollForward；
var appScrollPosition=0；
var scheduledAnimationFrame=false；
函数appScrollReverse（）{
scheduledAnimationFrame=false；
如果（应用滚动位置>500）
返回；
$header.removeClass（“darkHeader”）；
appScroll=appScrollForward；
}
函数appScrollForward（）{
scheduledAnimationFrame=false；
如果（位置<500）
返回；
$header.addClass（“darkHeader”）；
appScroll=appScrollReverse；
}
函数appScrollHandler（）{
appScrollPosition=window.pageYOffset；
if（scheduledAnimationFrame）
返回；
scheduledAnimationFrame=true；
requestAnimationFrame（appScroll）；
}
jQuery（窗口）.scroll（appScrollHandler）；

也许有人会觉得这很有帮助。
下面是在滚动过程中处理类的纯javascript示例

您可能希望限制滚动事件的处理，因为处理程序逻辑变得更加复杂，在这种情况下，来自
lodash
lib的
throttle
很方便

如果您正在执行spa，请记住，一旦不需要事件侦听器，您需要使用
removeEventListener
清除它们（例如在组件的
onestory
生命周期钩子期间，如
销毁）(
jQuery(document).ready(function(e) {
    var WindowHeight = jQuery(window).height();

    var load_element = 0;

    //position of element
    var scroll_position = jQuery('.product-bottom').offset().top;

    var screen_height = jQuery(window).height();
    var activation_offset = 0;
    var max_scroll_height = jQuery('body').height() + screen_height;

    var scroll_activation_point = scroll_position - (screen_height * activation_offset);

    jQuery(window).on('scroll', function(e) {

        var y_scroll_pos = window.pageYOffset;
        var element_in_view = y_scroll_pos > scroll_activation_point;
        var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;

        if (element_in_view || has_reached_bottom_of_page) {
            jQuery('.product-bottom').addClass("change");
        } else {
            jQuery('.product-bottom').removeClass("change");
        }

    });

});

jQuery(document.body).scroll(function() {
        var scroll = jQuery(document.body).scrollTop();

        if (scroll >= 300) {
            //alert();
            header.addClass("sticky");
        } else {
            header.removeClass('sticky');
        }
    });

        var $header = jQuery( ".clearHeader" );         
        var appScroll = appScrollForward;
        var appScrollPosition = 0;
        var scheduledAnimationFrame = false;

        function appScrollReverse() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition > 500 )
                return;
            $header.removeClass( "darkHeader" );
            appScroll = appScrollForward;
        }

        function appScrollForward() {
            scheduledAnimationFrame = false;
            if ( appScrollPosition < 500 )
                return;
            $header.addClass( "darkHeader" );
            appScroll = appScrollReverse;
        }

        function appScrollHandler() {
            appScrollPosition = window.pageYOffset;
            if ( scheduledAnimationFrame )
                return;
            scheduledAnimationFrame = true;
            requestAnimationFrame( appScroll );
        }

        jQuery( window ).scroll( appScrollHandler );