Получить идентификатор текущего элемента в поле зрения

Question

У меня есть список элементов, которые организованы в алфавитном порядке на странице. Я хотел бы создать фиксированный элемент сбоку страницы, которая показывает, в какой строке письма вы сейчас прокручиваетесь.

Например, если вы прокручиваете элементы, начиная с буквы «D», фиксированный div отобразит «D». Я пытаюсь создать это с помощью jQuery, но считаю это сложным.

Каждая секция имеет класс «карточный контейнер» и «идентификатор», соответствующий текущей букве.

ie.

<div id="a" class="card-container"> 
 
    ... 
 
</div> 
 
<div id="b" class="card-container"> 
 
    ... 
 
</div> 
 
<div id="c" class="card-container"> 
 
    ... 
 
</div> 
 
...

Любая идея, как я могу это сделать?

EDIT

До сих пор у меня есть это:

$(window).scroll(function() { 
 
    var winTop = $(this).scrollTop(); 
 
    var letters = $('.card-container'); 
 

 
    letters.each(function(section) { 
 
    if($(this).position().top <= winTop) { 
 
     console.log($(this).context.id); 
 
     $('.letter-show h3').text($(this).context.id); 
 
    } 
 
    }); 
 
});

Так что это, кажется, работает, но я чувствую, что это не очень производительным. Любые предложения по улучшению этого?

Answer 1

Как я уже сказал в комментарии: Там не много вы можете сделать, чтобы улучшить свой код - несколько выигрыша миллисекунды в наибольшей степени. Такие вещи, как сведение к минимуму поиска DOM и нарушение цикла при обнаружении правильного элемента, удаление jQuery и т. Д. Но я сомневаюсь, что вы заметите разницу даже на самой медленной машине, которую вы можете найти.

var letters = $('.card-container'); 
 
var letterShow = $('.letter-show h3'); 
 
$(window).scroll(function() { 
 
    var winTop = $(this).scrollTop();  
 
    letters.each(function(section) { 
 
    if($(this).position().top <= winTop) { 
 
     letterShow.text($(this).context.id); 
 
    } 
 
    }); 
 
});

.card-container {height: 300px;border-top: 1px solid} 
 
.letter-show {position: fixed}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="letter-show"><h3></h3></div> 
 
<div id="a" class="card-container"> 
 
    ... 
 
</div> 
 
<div id="b" class="card-container"> 
 
    ... 
 
</div> 
 
<div id="c" class="card-container"> 
 
    ... 
 
</div> 
 
<div id="d" class="card-container"> 
 
    ... 
 
</div> 
 
<div id="e" class="card-container"> 
 
    ... 
 
</div>

Answer 2

Это то, что сделал трюк:

$(window).scroll(function() { 
 
    var winTop = $(this).scrollTop(); 
 
    var letters = $('.card-container'); 
 

 
    letters.each(function(section) { 
 
    if($(this).position().top <= winTop) { 
 
     $('.letter-show h3').text($(this).context.id); 
 
    } 
 
    }); 
 
});