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

---

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

这是我的密码

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

这段代码对我很有用。希望它能对您有所帮助。
在类似的情况下，我希望避免由于性能问题总是调用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
清除它们（例如在组件的
onestroy
生命周期钩子期间，如
destroy（）
for Vue，或者可能返回
useffect
hook for React的函数）


const navbar=document.getElementById（'navbar'））
//OnScroll事件处理程序
const onScroll=（）=>{
//获取滚动值
const scroll=document.documentElement.scrollTop
//如果滚动值大于0-添加类
如果（滚动>0）{
navbar.classList.add（“滚动”）；
}否则{
navbar.classList.remove（“滚动”）
}
}
//可选-使用lodash在100ms时对onScroll处理程序进行节流
const throttledOnScroll=u0.throttle（onScroll，100，{}）
//使用onScroll或throttledOnScroll
window.addEventListener（'scroll'，onScroll）
#导航栏{
位置：固定；
排名：0；
左：0；
右：0；
宽度：100%；
高度：60px；
背景色：#89d0f7；
盒影：0px 5px 0px rgba（0,0,0,0）；
过渡：箱影500ms；
}
#导航栏。滚动{
盒影：0px 5px 10px rgba（0,0,0,0.25）；
}
#内容{
高度：3000px；
边缘顶部：60像素；
}

我可以添加position:fixed to the darkHeader类，这是我的初衷。现在的问题是，我无法让它在用户回滚后重新交换它们。这是因为您从选择器中删除了该类。在我更新小提琴时，您可以轻松缓存标题。谢谢，Fab，我的方法也可以，但这是sil吗怎么做？@andy Nope，事实上我正准备发布它。这是一种很好的方法，不存储任何不必要的变量，而是在每次滚动页面时查询DOM。这里还有另一种方法：谢谢你的帮助，我想我会用你的。试试看
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

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

$(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');
        }
    });
});

.clearHeader {
  height:50px;
  background:lightblue;
  position:fixed;
  top:0;
  left:0;
  width:100%;

  -webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
  transition: background 2s;
}

.clearHeader.darkHeader {
 background:#000;
}

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