javascript - 如何使我的编号比例响应滚动和点击？

Question

因此，我正在使用带编号的刻度(如果有帮助的话，用于黑暗天空的 Bortle 刻度)创建一个交互式作品。我希望大部分内容的比例都保留在页面上，而用户滚动浏览比例上每个数字的不同解释。比例只是一条垂直的数字线，每个数字都在自己的圆圈中，没有填充和 1 像素的实线边框。

这是我想要它做的:假设您正在从第 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>  

这是 CSS:

.bortlescale div {
    border:1px solid white;
    margin: 60px;
    margin-right:0px;
    padding:5px;
    width:60px;
    text-align: center;
    border-radius: 100px;
    position: relative;
    color:white;
    font-family:"Museo300Regular";
}

我真的希望有人能帮我解决这个问题!谢谢!

Answer 1

滚动时需要获取$(window)的scrollTop值，然后与每个'explanation'offset().top 位置以确定用户滚动到的位置。

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');

});

查看此 jsfiddle