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

这就是Javascript让Div＆＃39; Sticky＆＃39;当它到达页面顶部时固定在页面顶部。我需要文字＆＃39; Arcade Fire＆＃39;当div部分2到达页面顶部时，更改为第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

滚动到下一个div

1 个答案: