Добавить/удалить класс с jQuery на основе вертикальной прокрутки?

Так в основном я хотел бы удалить класс из 'заголовка' после того, как пользователь прокручивает немного вниз, и добавьте другой класс для изменения, это - взгляд.

При попытке выяснить самый простой способ сделать это, но я не могу заставить его работать.

$(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>

Я уверен, что делаю что-то очень элементарная несправедливость.

60
задан 23 September 2015 в 10:51

1 ответ

Вот чистый пример JavaScript обработки классов во время прокрутки.

Вы, вероятно, хотели бы отрегулировать события прокрутки обработки, больше поскольку логика обработчика становится более сложной, в этом случае throttle от lodash, lib пригождается.

И если Вы делаете спа, имейте в виду, что необходимо очистить слушателей события с removeEventListener, как только они не нужны (например, во время onDestroy рычаг жизненного цикла компонента, как destroyed() для Vue, или, возможно, возвратите функцию useEffect, рычаг для Реагирует).

const navbar = document.getElementById('navbar')

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

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

  // If scroll value is more than 0 - add class
  if (scroll > 0) {
    navbar.classList.add("scrolled");
  } else {
    navbar.classList.remove("scrolled")
  }
}

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

// Use either onScroll or throttledOnScroll
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>
0
ответ дан 1 November 2019 в 09:36

Другие вопросы по тегам:

Похожие вопросы: