滚动到下一个div时如何更改div的文本

Question

I've looked on Stack Overflow for a solution however I cannot find one that will work with my project.

What i'm trying to do is change the text in the H1 that has the title relevant to the part of the page that the user is on. For instance it could say section 1 then when you scroll down it changes to section two. I need to do it like this because it's a fixed title that lies underneath a fixed navbar and it should always be there. So to have a solution that would change the contents of it when the next div is at the top of the page would be just what I need.

<div id="sticky-anchor"></div>
<div id="sticky" class='a1'><h1 class='titleMusic noSelect'>Arcade Fire</div>

Thats the HTML

function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
    $('#sticky').addClass('stick');
} 
else {
    $('#sticky').removeClass('stick');
}
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
    });

Thats the Javascript to make the Div 'Sticky' fixed to the top of the page when it gets to the top of the page. I need the text 'Arcade Fire' to change to Section 2 (will do for now) when the div section 2 reaches the top of the page.

Answer 1

you can try something like this in scroll event

if($(window).scrollTop() > $('section_1').offset().top 
   && $(window).scrollTop() < $('section_1').offset().top + $('section_1').outerHeight(true)
){
   $('#sticky > h1').text('Section 1');
}

Working Demo