Обнаружение, если раздел в данный момент отображается в прокрутке

Question

Я пытаюсь сделать своего рода навигацию на основе текущего раздела.

Мой код выглядит следующим образом:

$(function() { 
    'use strict'; 

    function setTitle(title) { 
     $('.overlay').text(title); 
    } 

    function removeTitle() { 
     $('.overlay').text(''); 
    } 

    $(window).on('scroll', function() { 
     let windowScroll = $(window).scrollTop(), 
      sections = $('section[data-title]'); 

     sections.each(function() { 
      let thisStart = $(this).offset().top, 
       thisHeight = $(this).outerHeight(true), 
       thisTitle = $(this).attr('data-title'), 
       thisEnd = thisHeight + thisStart; 

      console.log(`start: ${thisStart}, end: ${thisEnd}, scroll: ${windowScroll}`); 

      if(windowScroll >= thisStart && windowScroll < thisEnd) { 
       setTitle(thisTitle); 
      } else { 
       removeTitle(); 
      } 
     }); 
    }); 
}); 

HTML

<section class="section section-first"></section> 
<section class="section section-what" data-title="First"> 
</section> 
<section class="section section-cv" data-title="Secound"> 
</section> 
<div class="overlay"></div> 

К сожалению, он работает только с последним .section. Что я могу сделать?

Пожалуйста, обратитесь к моей CodePen, чтобы увидеть, что я имею в виду именно: http://codepen.io/tomekbuszewski/pen/Xmovwq

Answer 1

Добавить return false; здесь:

if(windowScroll >= thisStart && windowScroll < thisEnd) { 
    setTitle(thisTitle); 
    return false;  // <- add this 
} else { 
    removeTitle(); 
} 

Это вспыхнет метода each и предотвратить название от удаления, как только это было задавать.

CodePen