Question

我想使用scroll函数来更改元素的类。以下代码工作正常：

$(document).scroll(function(){
     $('.row-1').toggleClass('scrolled', $(this).scrollTop() > 1);
 });

但是，如果您只想在＆gt; 1和＆lt; 1000之间的范围内更改类，该怎么办？有没有简单的方法呢？

Answer 1

我认为你想要的是：

$(document).scroll(function() {
    const rangeTrue = $(this).scrollTop() > 1 && $(this).scrollTop() < 1000;
    $('.row-1').toggleClass('scrolled', rangeTrue);
});

Answer 2

条件表达式（即$(this).scrollTop() > 1）可以扩展为具有两个条件。来自.scrollTop()的值可以存储在变量中（使用const，除非Browser compatibility是个问题 - 然后使用var）以减少对{{3}的查询}}。然后使用DOM运算符（即&&）来组合条件。

 let scrollTop = $(this).scrollTop();
 $('.row-1').toggleClass('scrolled', scrollTop > 1 && scrollTop < 1000);

见下面的演示

＆＃13;

$(() => { //wait until DOM is ready
  const scrollVal = $('#scrollVal');
  $(document).scroll(function() {
    const scrollTop = $(this).scrollTop();
    $('.row-1').toggleClass('scrolled', scrollTop > 1 && scrollTop < 1000);
    scrollVal.text(scrollTop+'px');
  });

  //add some div elements for demonstration purposes
  new Array(10).fill().forEach((element, index) => $('<div>').addClass('row-' + (index % 2)).text('row' + (index % 2)).appendTo(document.body));
});

＆＃13;

div {
  padding: 80px;
}

.scrolled {
  border: 1px solid #F00;
}

#scrollValContainer {
  position: fixed;
  padding: 4px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scrollValContainer">
Scroll: <span id="scrollVal">0px</span></div>

＆＃13;

仅在滚动上更改某个范围的div类

2 个答案: