У меня div
содержит много других со случайной высотой. Когда пользователь прокручивает, я хочу установить курсор на первый видимый элемент div (сначала видимый, потому что я не знаю, как сделать то, что я действительно хочу, в середине экрана, если это возможно?), Но когда я прокручиваю сверху или снизу я не хочу забывать другие деления. Каждый из них может быть «выбран».
Я думаю, что я делаю это правильно, но когда я в упадке, я не знаю, как я могу это сделать?
$(document).ready(function() {
for (i = 0; i < 100; i++) {
var h = Math.floor(Math.random() * (50 + 1) + 20);
$('.content').append('<div id="' + i + '" class="cell" style="height:' + h + 'px;"></div>');
}
$(document).on('scroll', function() {
var id = current();
$('.cursor').css('top', $('#' + id).position().top + 'px')
});
});
function current() {
$('.cell').each(function() {
if ($(this).position().top > $(document).scrollTop()) {
id = $(this).attr('id');
return false;
}
});
return id;
}
.cell {
width: 100px;
border: 1px solid;
margin-bottom: 5px;
}
.cursor {
width: 0px;
height: 0px;
z-index: 9999;
position: absolute;
border-style: solid;
border-width: 10px 10px 0px 0px;
border-color: #000 transparent transparent transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="cursor"></div>
</div>
https://codepen.io/lokomass/pen/OJyXXwV
РЕДАКТИРОВАТЬ:
Если прокрутить до середины экрана ... Если я нахожусь на вершине div, я хочу, чтобы была выбрана первая ячейка. Если я прокручиваю немного вниз, я хочу выбрать вторую целле. ... Если я достигну середины div, я хочу выбрать ячейку в середине экрана (пример, который вы сделали) ... Если я достигну нижней части div, я хочу выбрать последнюю ячейку
Чтобы возобновить, я хочу, чтобы курсор двигался с помощью прокрутки. У каждой ячейки может быть курсор от первой до последней.
Проблема с вашей демонстрацией - вверху, нельзя выбрать первую и вторую, а ту же проблему внизу.