javascript - 如何在用户滚动 div 时突出显示 bottom li？

Question

你能告诉我当用户在 div 中滚动时如何突出显示 bottom li 吗？我有一个容器div，里面有四个div。在页脚中，我还有四个 li(第一、第二、第三、第四)。我想在用户滚动相应的 div 时选择 li(背景变为红色)。

例子

当代码运行时，第一个 li 应该被选中，它的背景变为红色，因为第一个 div 在视口(viewport)中。如果用户滚动并移动到第二个 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
  );
}

})()

我不想使用插件

Answer 1

https://jsbin.com/borohoheji/edit?html,css,js,console,output

看看我做了什么我用.is(':visible')检查元素是否可见

你可以在那里工作，做你想做的事