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

Question

我在 Stack Overflow 上寻找解决方案，但我找不到适合我的元素的解决方案。

我想做的是更改 H1 中的文本，该文本的标题与用户所在的页面部分相关。例如，它可以说第 1 节，然后当您向下滚动时，它会变为第 2 节。我需要这样做，因为它是位于固定导航栏下方的固定标题，它应该始终存在。因此，当下一个 div 位于页面顶部时，拥有一个可以更改其内容的解决方案正是我所需要的。

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

这就是 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();
    });

这就是当 Div 到达页面顶部时使 Div 固定在页面顶部的 Javascript。当 div 第 2 部分到达页面顶部时，我需要将文本“Arcade Fire”更改为第 2 部分(现在会做)。

Answer 1

你可以在滚动事件中尝试这样的事情

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

Working Demo