Javascript 如何使我的数字刻度对滚动和单击做出响应？

所以我用一个编号的比例（黑色天空的Bortle比例，如果有帮助的话）创建了一个交互式的片段。我希望在用户滚动浏览天平上每个数字的不同解释时，天平在页面上的大部分部分保持不变。刻度只是一条竖直的数字线，每个数字都在各自的圆圈内，没有填充和1px的实心边框

我希望它这样做：假设您正在从第2级的解释滚动到第3级的解释。当你在2上时，这个圆圈有一个颜色填充。当您滚动2到3时，3得到颜色填充，2返回为无填充。这是双向的。我还希望用户能够点击每个圆圈，并被带到相应的页面。因此，你点击2，你就进入了2的解释部分

老实说，我不知道如何做到这一点，只有有HTML和CSS写出来。以下是HTML：

<div class="bortlescale">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>  

---

我真的希望有人能帮我！谢谢

您需要在滚动时获取

$（窗口）

的

滚动顶部

值，然后将其与每个“解释”

offset（）进行比较。顶部

位置确定用户滚动到的位置

var $scales = $('.bortlescale div'),
    $explanations = $('.explanation div'),
    winH = $(window).height(),
    topSpacing = 50;//you can set this one

$explanations.height(winH);

/* scrolling */
$(window).scroll(function(){
    var st = $(this).scrollTop();

    $explanations.each(function(index){
         var offset = $(this).offset(),
             h = $(this).height();

        if(st >= offset.top - topSpacing && st < offset.top + h - topSpacing){
            $scales.eq(index).css({'background':'red'});//color fill it
        }else{
            $scales.eq(index).css({'background':'none'});//remove color fill
        }
    });
})

/* clicking */
$scales.click(function(){
    var index = $(this).index(),
        $target = $explanations.eq(index),
        pos = $target.offset().top;

    $('body').stop().animate({scrollTop:pos-topSpacing},'slow');

});

var$scales=$（'.bortlescale div'），
$EXPLATIONS=$（'.EXPLATIONS div'），
winH=$（窗口）.height（），
上间距=50//你可以设置这个
$1.高度（winH）；
/*滚动*/
$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
$EXPLATIONS.每个（功能（索引）{
var offset=$（this）.offset（），
h=$（this）.height（）；
如果（st>=offset.top-topSpacing和&st

---

看这个

非常感谢你。这太神奇了。