как переключать класс, прокручивая внутри и элемент в JQuery - PullRequest
Новая
       17

как переключать класс, прокручивая внутри и элемент в JQuery

0 голосов
/ 15 февраля 2019

У меня есть и элемент классифицирован .root-body, он содержит все содержимое страницы и прокручивается вместо <body>.Я хочу переключить класс на свою страницу .navigation, когда пользователь прокручивает внутри .root-body

HTML 

<body>
    <div class="navigation"></div>
    <div class="root-body">
        <!-- page content goes here -->
    </div>
</body>

CSS 

body {
    overflow: hidden;
}
.root-body {
    width: 100vw;
    height: 100vh;
    overflow: scroll;
}

1 Ответ

0 голосов
/ 15 февраля 2019

Используя $().on('scroll', ...), вы можете прослушивать событие прокрутки в определенном элементе, как показано ниже.Затем вы можете использовать метод addClass для добавления нужного вам класса и removeClass для его удаления. 

$(document).ready(function() {
    'use strict';
    $(".root-body").on('scroll', evt => {
      if($(evt.target).scrollTop() > 1){
        $(".navigation").addClass('bg-red');
      } else {
        $(".navigation").removeClass('bg-red');
      }
    })
})
body {
 overflow: hidden;
}

.root-body {
    width: 100px;
    height: 100px;
    overflow: scroll;
}

.navigation {
  height: 20px;
  width: 100px;
}

.bg-red {
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation"></div>
<div class="root-body">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem culpa laboriosam aut dignissimos, labore nemo, at incidunt voluptas dicta totam iusto, debitis neque explicabo! Nulla soluta officia earum ratione tenetur!
</div>
...