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

您能告诉我如何在div中滚动时添加活动类吗？我有一个容器，其中有四个div。在页脚中，我还有四个

li

（第一、第二、第三）。当用户滚动div时，我想选择

li

范例

代码运行时，应选择第一个

li

，因为第一个div位于视图端口中。如果用户滚动并移动到第二个div，则应选择第二个

li

。等等

我试过了

（函数（）{
"严格使用",；
$（函数（）{
$（“#容器”）。滚动（函数（）{
console.log（'scrlling'）；
if（elementInViewport2（$（'first'））{
//元素可见，请执行某些操作
console.log（'第一个可见'）
}否则{
console.log（'第二个可见'）
}
});
})
函数元素INVIEWPORT2（el）{
var top=标高偏移；
var left=el.offsetLeft；
var宽度=el偏移网络宽度；
var高度=el离地高度；
while（el.offsetParent）{
el=el.offsetParent；
顶部+=标高偏移；
左+=el.offsetLeft；
}
返回(
顶部<（window.pageYOffset+window.innerHeight）&&
左<（window.pageXOffset+window.innerWidth）&&
（顶部+高度）>window.pageYOffset&&
（左+宽）>window.pageXOffset
);
}
})()

---

<>我不想使用插件

你应该考虑基于一个边改变类-< /p>

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

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

}

函数元素INVIEWPORT（e）{
var winBottom=$（窗口）.scrollTop（）+$（窗口）.height（）；
var visibletop=e.offset（）.top-winBottom；
如果（可视性p<0）{
返回false；
}否则{
返回true；
}
}

我尝试使用您编写的几乎所有代码，只做了少许修改： 以下是工作示例链接：

CSS:

JS:

（函数（）{
"严格使用",；
$（函数（）{
$（'fC li:eq（0）'）.css（'background-color'，'red'）.css（'color'，'ffffff'）；
$（“#容器”）。滚动（函数（）{
//console.log（'scrlling'）；
if（elementInViewport（$（'first'））{
//元素可见，请执行某些操作
//console.log（'第一个可见'）
}否则{
//console.log（'第二个可见'）
}
});
});
函数元素INVIEWPORT（e）{
var winBottom=$（窗口）.scrollTop（）+$（窗口）.height（）；
var visibletop=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（$）&Math.abs（e.offset（）.top）first+second-parseInt（$（'.#container'）.css（$）&Math.abs（e.offset（）.top）first+second+second-parseInt（$（'.#container'）.css（$（'height'））和Math.abs（e.offset（）.top））不工作，我想你应该在你的系统中进行测试。我正在使用相同的代码触发动画。
返回$（e）.偏移量（）.top-$（窗口）。scrollTop（）<$（窗口）。height（）/3；
在另一个项目中仅使用此行。你能分享链接你面临的问题吗？当用户滚动时，它没有选择底部
li
function elementInViewport(e) {
    var winBottom = $(window).scrollTop() + $(window).height();

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

}

.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;
}

(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;
    }

 }

})();