Question

我的元素分类为.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;
}

Answer 1

使用$().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>

如何通过滚动jQuery中的和元素来切换类

1 个答案: