var $menu = $('.menu'),
$items = $menu.find('li'),
num = $items.length,
current = -1;
$(document).on('keyup', function (e) {
var key = e.which;
switch (key) {
case 38:
current--;
if (current < 0) {
current = num - 1;
}
break;
case 40:
current++;
if (current > num - 1) {
current = 0;
}
break;
};
$items.eq(current).addClass('active').siblings().removeClass('active');
});
.container {
position: relative;
width: 400px;
height: 400px;
overflow: hidden;
border: 1px solid #000;
}
.scroll {
position: relative;
box-sizing: border-box;
width: 420px;
max-height: 400px;
padding-right: 20px;
overflow-y: scroll;
}
<link rel="stylesheet" href="style.css?v=1" />
<link rel="stylesheet" href="style.css?v=2" />
function maxSymbols ($elem, num, fadeLength) {
var text = $elem.text(),
temp = text.split(''),
step,
fade,
result;
if (!fadeLength) {
fadeLength = 10;
}
fade = temp.slice(num - fadeLength, num);
temp.length = num - fadeLength;
result = temp.join('');
for (var i = 0; i < fadeLength; i++) {
step = +(1 - (1 / fadeLength * i)).toFixed(2);
result += '<span style="opacity: ' + step + '">' + fade[i] + '</span>';
}
$elem.html(result);
}
// ограничим текст в блоке до 100 символов
// причем последние 20 будут исчезать с эффектом fadeOut
maxSymbols($('.test'), 100, 20);