在div中滚动时如何添加活动类？

Question

您能告诉我在div滚动时如何添加活动类吗？ 我有一个容器，其中有四个div。 在页脚中，我还有四个li （第一，第二，第三）。 我想在用户滚动div时选择li 。

例

代码运行时，应选择第一个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
  );
}

})()

我不想使用插件

Answer 1

您应该考虑基于一个优势来更改课程-

function elementInViewport(e) {
    var winBottom = $(window).scrollTop() + $(window).height();

    var visibleETop  = e.offset().top - winBottom;
    if(visibleETop < 0){
        return false;
    }else{
        return true;
    }

}

Answer 2

我已经尝试使用几乎所有您编写的代码，并做了一些修改：这是工作示例链接： https : //jsfiddle.net/almamun1996/21wc37sx/3/

CSS：

.item {
  width:25%;
  display:inline-block;
  margin:0;
  padding:0;
  color:blue;
  font-size:20px;
  text-align: center;
}
.footer{
  border:1px solid;
  position:fixed;
  width:100%;
  bottom:0px;
}
#container {
  border:1px solid red;
  overflow:auto;
  width:100%;
  height:300px;
}
.fC{
  background-color:yellow;
  padding:0;
}
#first{
  background-color:blue;
}
#second {
  background-color:green;
}
#third {
  background-color:pink;
}

#fourth {
  background-color:red;
}
.active {
  background-color : red;
}

JS：

(function(){
  'use strict';
  $(function(){
  $('.fC li:eq(0)').css('background-color','red').css('color','#ffffff');

  $( "#container" ).scroll(function() {
   //console.log('scrlling');
   if (elementInViewport($('#first'))) {
     // The element is visible, do something
     //console.log('first visible')
 } else {
      //console.log('second visible')
     }
 });

});

function elementInViewport(e) {
    var winBottom = $(window).scrollTop() + $(window).height();

    var visibleETop  = e.offset().top - winBottom;

    var first = parseInt($('#first').css('height'));
    var second = parseInt($('#second').css('height'));
    var third = parseInt($('#third').css('height'));
    var fourth = parseInt($('#fourth').css('height'));

    if(Math.abs(e.offset().top) > first - parseInt($('#container').css('height')) && Math.abs(e.offset().top) <= first+second - parseInt($('#container').css('height')))
    {
        $('.fC li:eq(0)').css('background-color','').css('color','');
        $('.fC li:eq(2)').css('background-color','').css('color','');
        $('.fC li:eq(3)').css('background-color','').css('color','');
        $('.fC li:eq(1)').css('background-color','red').css('color','#ffffff');
    }
    else if(Math.abs(e.offset().top) > first+second - parseInt($('#container').css('height')) && Math.abs(e.offset().top) <= first+second+third - parseInt($('#container').css('height')))
    {
        $('.fC li:eq(0)').css('background-color','').css('color','');
        $('.fC li:eq(1)').css('background-color','').css('color','');
        $('.fC li:eq(3)').css('background-color','').css('color','');
        $('.fC li:eq(2)').css('background-color','red').css('color','#ffffff');

    }
    else if(Math.abs(e.offset().top) > first+second+third - parseInt($('#container').css('height')) && Math.abs(e.offset().top) <= first+second+third+fourth - parseInt($('#container').css('height')))
    {
        $('.fC li:eq(0)').css('background-color','').css('color','');
        $('.fC li:eq(1)').css('background-color','').css('color','');
        $('.fC li:eq(2)').css('background-color','').css('color','');
        $('.fC li:eq(3)').css('background-color','red').css('color','#ffffff');

    }
    else{
        $('.fC li:eq(1)').css('background-color','').css('color','');
        $('.fC li:eq(2)').css('background-color','').css('color','');
        $('.fC li:eq(3)').css('background-color','').css('color','');
        $('.fC li:eq(0)').css('background-color','red').css('color','#ffffff');
    }
    if(visibleETop < 0){
        return false;
    }else{
        return true;
    }

 }

})();

HTML：只需将HTML id='third'的id='three'替换为id='third' 。