Javascript 当用户滚动div时，如何突出显示底部li？

您能告诉我当用户在div中滚动时如何突出显示底部li吗？我有一个容器div，其中有四个div。在页脚我也有四个李第一，第二，第三，第四。我想选择当用户滚动相应的div时，li背景变成红色

范例

当代码运行时，应选择第一个li，因为第一个div位于视图端口中，所以背景变为红色。如果用户滚动并移动到第二个div，则应选择第二个li。等等

我试过了

我不想使用插件

看看我做了什么，我检查元素是否可见。is'：visible'

您可以从那里开始工作，完全按照自己的意愿执行操作

将代码更改为：

    (function(){
  'use strict';
  $(function(){
    $( "#container" ).scroll(function() {
      console.log('scrlling');
      if (elementInViewport($('#first'))) {
    // The element is visible, do something
        console.log('first visible')
    } else {
         console.log('second visible')
    }
    });
    $( "#container >div" ).hover(
      function() {
        $(this).css('color', 'yellow');
      });
  })

---

首先，请执行以下操作：

为所有文本div指定一个类名，例如“para”，使它们更容易作为集合选择。 在样式表中建立ul.fC li.active{…}指令，以提供所需的视觉效果。 然后：

(function() {
    'use strict';
    $(function() {
        var $container = $("#container"),
            $paras = $container.children(".para"), // the four text divs.
            $listElements = $(".footer ul.fC li"), // the four li elements in the footer.
            oldIndex = -1;
        $container.scroll(function() {
            var index = $paras.index($paras.filter(visibleY).eq(0)); // position of the first visible text div.
            if(index !== oldIndex) { // avoid unnecessary work
                $listElements.eq(oldIndex).removeClass('active'); // remove highlight
                $listElements.eq(index).addClass('active'); // add highlight
                oldIndex = index; // remember index for next event turn
            }
        }).trigger('scroll');
        function visibleY() {
            // based on http://stackoverflow.com/a/21627295/3478010
            var el = this; // because function is called as a .filter() callback.
            var rect = el.getBoundingClientRect(), 
                top = rect.top, 
                height = rect.height, 
                el = el.parentNode;
            do {
                rect = el.getBoundingClientRect();
                if (top <= rect.bottom === false) return false;
                // Check if the element is out of view due to a container scrolling
                if ((top + height) <= rect.top) return false
                el = el.parentNode;
            } while (el != document.body);
            // Check its within the document viewport
            return top <= document.documentElement.clientHeight;
        };
    });
})();

与：

var index = $paras.index($paras.filter(visibleY).last()); // position of the last visible para.

---

选择哪个更合适。

因为所有的li都比视口大。你的逻辑不能正常工作。更好的方法是检查它们相对于视口的顶部位置，然后在VIEW中考虑它的距离，在VIEW或JSB中共享视图。$容器> div选择容器中的每一个div。只需将CSS更改为您想要的内容。。

var index = $paras.index($paras.filter(visibleY).eq(0)); // position of the first visible para.

var index = $paras.index($paras.filter(visibleY).last()); // position of the last visible para.