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

Question

所以基本上我想在用户向下滚动一点之后从'header'中删除该类,并添加另一个类来改变它的外观.

试图找出最简单的方法,但我不能使它工作.

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

CSS

.clearHeader{
    height: 200px; 
    background-color: rgba(107,107,107,0.66);
    position: fixed;
    top:200;
    width: 100%;   
}    

.darkHeader { height: 100px; }

.wrapper {
    height:2000px;
}

HTML

<header class="clearHeader">    </header>
<div class="wrapper">     </div>

我确定我做的事情非常错误.

Answer 1

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

     //>=, not <=
    if (scroll >= 500) {
        //clearHeader, not clearheader - caps H
        $(".clearHeader").addClass("darkHeader");
    }
}); //missing );

小提琴

此外,通过删除clearHeader类,您position:fixed;将从元素中删除该元素以及通过$(".clearHeader")选择器重新选择它的能力.我建议不要删除该类并在其上添加新的CSS类以用于样式目的.

如果您想在用户向上滚动时"重置"类添加:

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

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

小提琴

编辑:这是缓存标题选择器的版本 - 更好的性能,因为它不会在每次滚动时查询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');
        }
    });
});

小提琴

Answer 2

纯javascript

下面是在滚动过程中处理类的纯 JavaScript 示例。

//! Put the class name that you want to use
// Class name that will be added to the navbar element in the "scrolled" state
const SCROLLED_STATE_CLASS = "scrolled"

//! Use your own ID or selector
// The id of navigation bar HTML element
const NAVBAR_ID = "navbar"

// Get the navigation bar element
const navbar = document.getElementById(NAVBAR_ID)

// OnScroll event handler
const onScroll = () => {

  // Get scroll value
  const scroll = document.documentElement.scrollTop

  // If scroll value is more than 0 - means the page is scrolled, add or remove class based on that
  if (scroll > 0) {
    navbar.classList.add(SCROLLED_STATE_CLASS);
  } else {
    navbar.classList.remove(SCROLLED_STATE_CLASS)
  }
}

// Use the function
window.addEventListener('scroll', onScroll)

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
  background-color: #89d0f7;
  box-shadow: 0px 5px 0px rgba(0, 0, 0, 0);
  transition: box-shadow 500ms;
}

#navbar.scrolled {
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
}

#content {
  height: 3000px;
  margin-top: 60px;
}

<!-- Optional - lodash library, used for throttlin onScroll handler-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<header id="navbar"></header>
<div id="content"></div>

一些改进

您可能希望限制处理滚动事件，尤其是当处理程序逻辑变得更加复杂时，在这种情况下throttleliblodash会派上用场。

如果您正在做 spa，请记住，removeEventListener一旦不需要事件侦听器，您就需要清除它们（例如，在onDestroy组件的生命周期挂钩期间，例如destroyed()Vue，或者可能useEffect是 React 的挂钩的返回函数）。

使用 lodash 进行节流的示例：

    // Throttling onScroll handler at 100ms with lodash
    const throttledOnScroll = _.throttle(onScroll, 100, {})

    // Use
    window.addEventListener('scroll', throttledOnScroll)