Как я могу сделать свою нумерованную шкалу отзывчивой на прокрутку и нажатие?

Question

Как я могу сделать свою нумерованную шкалу отзывчивой на прокрутку и нажатие?

0

Поэтому я создаю интерактивную пьесу с использованием пронумерованного масштаба (шкала 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>

И вот 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";
}

Я действительно надеюсь, что кто-то может мне помочь! Благодарю!

user3053426 01 дек. 2013, в 04:06

Источник

Теги:

javascript

jquery

html

css

scroll

1 ответ

Ещё вопросы

Mark S · Accepted Answer · 2013-12-01T00-38-00.000Z

Вам нужно получить значение scrollTop $(window) во время прокрутки, а затем сравнить его с каждым "пояснением" 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

Огромное спасибо. Это потрясающе.