特定の範囲のスクロールでdivのクラスを変更する

Question

スクロール機能を使用して要素のクラスを変更したいと考えています。次のコードは正常に動作します：

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

しかし、あなたが唯一の> 1と< 1000年の間の範囲のクラスを変更したい場合は？ 簡単な方法はありますか？

Answer 1

条件式（すなわち$(this).scrollTop() > 1）の二つの条件を持つように拡張することができます。 .scrollTop()の値は、DOMのクエリを減らすために、を使用して変数に格納することができます（Browser compatibilityが問題の場合はvarを使用します）。次に、logical AND演算子（&&）を使用して条件を結合します。

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

あなたはghassen感謝これは

$(() => { //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)); 
 
});

div { 
 
    padding: 80px; 
 
} 
 

 
.scrolled { 
 
    border: 1px solid #F00; 
 
} 
 

 
#scrollValContainer { 
 
    position: fixed; 
 
    padding: 4px; 
 
}

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

Answer 2

は、私が何をしたいことはあると思う：

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