Не могли бы вы рассказать мне, как выделить нижний ли при прокрутке пользователя в div? У меня есть один контейнер div
, в котором есть четыре divs
. В нижнем колонтитуле у меня также есть четыре li
(первый, второй, третий, четвертый). Я хочу выбрать li
(фон станет красным), когда пользователь прокручивает соответственно div.
Пример
Когда код запускается, следует выбрать первый li
, его фон станет красным, потому что первый div находится в порт представления. Если пользователь прокручивает и перемещается во второй div, следует выбрать второй li
. И так далее.
Я так пробовал
https://jsbin.com/giwizufotu/edit?html,css,js,output
(function(){
'use strict';
$(function(){
$( "#container" ).scroll(function() {
console.log('scrlling');
if (elementInViewport2($('#first'))) {
// The element is visible, do something
console.log('first visible')
} else {
console.log('second visible')
}
});
})
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while(el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
})()
Я не хочу использовать плагин