如何让当前div部分的名称显示在另一个div中？

Question

我的页面上有不同的部分,如下所示:

<div class="red" data-section="Section Red"></div>
<div class="blue" data-section="Section Blue"></div>
<div class="yellow" data-section="Section Yellow"></div>
<div class="green" data-section="Section Green"></div>

还有一个单独的div:

<div class="current_div"></div>

该div始终位于页面顶部.如何使用当用户滚动到blue(或任何其他)div时,current_div将更改为:

<div class="current_div">Section Blue</div>

这是我的标记的小提琴:https://jsfiddle.net/wb7L954v/1/

必须有一个简单的方法来获得该data-section部分,并简单地把它放在该div中？

Answer 1

步骤:

• 获取具有该data-section属性的所有元素
• 在scroll事件上做
  • 迭代所有元素(从最后一个元素开始)
  • 如果电流scrollTop大于那个元素offsetTop,那就是我们要寻找的元素
  • data-section在适当的头元素中写入该元素的属性值

请参阅:https://jsfiddle.net/Leydfd5b/