选择最靠近窗口顶部的元素？

Question

我有一个固定的页面部分列表，当页面滚动时，链接到您正在突出显示的部分。至少这是我一直在努力实现的目标。

我想出的最好的：

$(document).scroll(function(){
$allSections = $('section[id^="section"]');
$allSections.each(function(){
  if ( ($(this).offset().top - window.pageYOffset) > 0 && 
       ($(this).offset().top - window.pageYOffset) < $(window).height()/2 ){  
  $("a[href$=" + (this).id + "]").addClass('highlight');
  } else {
    $("a[href$=" + (this).id + "]").removeClass('highlight');
  }
});
});

以上选择顶边位于窗口顶部和上半部分的部分。不幸的是，对于较长的部分，存在没有被选中的卷轴，并且具有较短的部分，其中有滚动，其中当我的小提琴呈现时它选择更多的1。 https://jsfiddle.net/aetkgpxc/50/

如何选择顶边最靠近窗口顶部的元素（来自元素组）？

Answer 1

我已经更新了你的代码，它在这里工作正常。

JS

$(document).scroll(function(){
    $allSections = $('section[id^="section"]');
    $allSections.each(function(){
      if ( ($(this).offset().top - window.pageYOffset) > 0 && 
           ($(this).offset().top - window.pageYOffset) < $(window).height()/2 ){  
      $("a").removeClass('highlight');     
      $("a[href$=" + (this).id + "]").addClass('highlight');
      } 
    });
  });

这是一个jsfiddle

Working Fiddle

更新

https://jsfiddle.net/SmitRaval/aetkgpxc/62/

JS

$(document).scroll(function(){
    $allSections = $('section[id^="section"]');
    $allSections.each(function(){
      if ( ($(this).offset().top - window.pageYOffset) <= 0 && 
           ($(this).offset().top - window.pageYOffset) < $(window).height()/2 ){  
      $("a").removeClass('highlight');     
      $("a[href$=" + (this).id + "]").addClass('highlight');
      } else {
        $("a[href$=" + (this).id + "]").removeClass('highlight');
      }
    });
  });