У меня есть скрипт для навигации на клавиатуре, который частично работает.
Когда я нахожусь на главной странице (вверху страницы), и я нажимаю клавишу "вниз" на моей клавиатуре, страница прокручивается до следующего раздела. Проблема в том, что если я прокручиваю свою мышь в середине страницы или внизу страницы, и я хочу использовать клавиатуру, чтобы перейти к следующему разделу (сверху или снизу), это не сработает. На самом деле у меня есть счетная система, которая позволяет вам перемещаться между разделами $ ('.layout'), но эта система показывает свои пределы.
Поэтому я смущен, и мне нужна помощь. Что я могу добавить в свой код для того, что моя клавиатурная навигация отлично работает в любой точке страницы?
http://jsfiddle.net/Xroad/LPvS9/7/
// KEYBOARD NAV
$(function () {
var positions = []
$('.layout').each(function () {
positions.push(parseInt($(this).offset().top));
})
var count = 0
var x = positions.length - 1
$(window).keydown(function (event) {
switch (event.keyCode) {
case 38:
if (count >= x * (-1) && count !== 0) {
count--
$('#page').stop().animate({
scrollTop: positions[count]
}, 700);
} else {
event.preventDefault()
}
break;
case 40:
if (count <= x) {
count++
$('#page').stop().animate({
scrollTop: positions[count]
}, 700);
} else {
event.preventDefault()
}
break;
}
});
});
вы можете отслеживать событие прокрутки и на основе этого обновления переменной счетчика.
$("#page").scroll( function (event) {
scrollTopPosition = $("#page").scrollTop()+$("#page").height();
for (i=positions.length-1; i>0; i--)
{
if (scrollTopPosition>=positions[i]) { count = i; break; }
}
});
обратите внимание, что я добавляю высоту страниц в верхнее положение, это необходимо, потому что последний раздел короче высоты страницы. Вы можете поэкспериментировать с удалением
+$("#page").height()
но для этого вам нужно будет убедиться, что в третьем разделе достаточно места, чтобы его заголовок мог прокручиваться вверх, как в другом разделе.
Я настоятельно рекомендую не манипулировать реализацией навигационных браузеров по умолчанию.
Если это не возможно, я думаю, что лучшим решением в вашем случае было бы сделать все события навигации клавиатуры основаны на текущей позиции прокрутки.
Одним из примеров является сохранение всех позиций или разделов, которые вы хотите переместить, в какой-то контейнер, например массив. Затем в событии нажатия клавиши вы должны проверить, где находится текущая позиция прокрутки, с приведенным ниже кодом, а затем реагировать соответствующим образом.
$('#page').scrollTop())