javascript - 如何在不使用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中的第一个条件 -> 如果文档的scrollTop值大于节的offsetTop -> 则表示滚动位置到达节的上边框

第二个条件->如果文档scrollTop值小于节offsetTop +节高度，则意味着滚动位置仍在节上，因此保持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>