如何在没有Jquery的情况下根据滚动位置找到当前div

Question

有人可以帮我解决这个问题。我在Jquery中找到了一个解决方案，但是我们需要普通的Javascript或Angular解决方案。我想我错过了一些东西。fiddle。

当滚动右侧面板上的内容时，相应的左侧面板应突出显示。如何在滚动期间识别当前div元素以使其处于活动状态？而且没有使用JQuery也是如此。

var app = angular.module('app', []);
app.controller('TodoCtrl', ['$scope', '$window', '$element', function($scope, $window, $element) {
  var totalclasses = angular.element(document.querySelector(".section"));
  var offsets = document.getElementById('section3').getBoundingClientRect();

  angular.element($window).bind("scroll", function() {
    angular.forEach(totalclasses, function(value, key) {
    });
  });
}]);

#navigation {
  position: fixed;
  top: 0;
  left: 250px;
}

#sections {
  position: absolute;
  top: 0;
  left: 400px;
}

.section {
  height: 300px;
  margin: 10px;
  padding: 10px;
  border: 1px dashed black;
}

#section5 {
  height: 1000px;
}

.active {
  background: red;
}

<div ng-app="app">
  <div ng-controller="TodoCtrl">
    <br>
  </div>
  <div id="navigation">
    <p id="msg">
    </p>
    <ul>
      <li class="section1">Section 1</li>
      <li class="section2">Section 2</li>
      <li id="section3">Section 3</li>
    </ul>
  </div>
  <div id="sections">
    <div data-id="section1" class="section">
      I'm section 1
    </div>
    <div data-id="section2" class="section">
      I'm section 2
    </div>
    <div data-id="section3" class="section">
      I'm section 3
    </div>
  </div>
</div>

Answer 1

我用简单的Javascript（希望它适合你）制作解决方案

在下方或fiddle

中查看

这很直接。

IF中的第一个条件 - ＆gt;如果文档scrollTop值大于sectionTop - >的部分;那么这意味着滚动位置到达了部分的顶部边框

第二个条件 - ＆gt;如果文档scrollTop值小于section offsetTop + section height，则意味着滚动位置仍在该部分上，因此请保留active类

如果不满足这两个条件，则滚动位置不在该部分上，因此删除该类激活。

让我知道是否有帮助

window.onscroll = function() {

  var section = document.getElementsByClassName("section");



  var bScroll = document.body.scrollTop;
  for (var i = 0; i < section.length; i++) {


    var sHeight = section[i].offsetHeight;
    var offsets = section[i].offsetTop;

    if (bScroll > offsets && bScroll < offsets + sHeight) {
      section[i].className = "section active";
    } else {
      section[i].className = "section";
    }


  }



}

#navigation {
  position: fixed;
  top: 0;
  left: 250px;
}

#sections {
  position: absolute;
  top: 0;
  left: 400px;
}

.section {
  height: 300px;
  margin: 10px;
  padding: 10px;
  border: 1px dashed black;
  transition: 0.3s;
}

#section5 {
  height: 1000px;
}

.active {
  background: red;
}

<div id="navigation">
  <p id="msg">
  </p>
  <ul>
    <li class="section1">Section 1</li>
    <li class="section2">Section 2</li>
    <li id="section3">Section 3</li>
  </ul>
</div>
<div id="sections">
  <div data-id="section1" class="section">
    I'm section 1
  </div>
  <div data-id="section2" class="section">
    I'm section 2
  </div>
  <div data-id="section3" class="section">
    I'm section 3
  </div>

</div>