javascript - 根据与页面顶部的距离更改粘性标题文本

Question

您好，尝试让粘性页眉内的文本根据距页面顶部的距离发生变化。假设我有一个单页网站，有几个不同的 did 部分，每个部分测量 100vh。导航通过 href="#sectionA"、"#sectionB"等链接到它们。

因此，如果我从着陆页开始并向下滚动到“sectionA”，标题应该更改为该部分的标题。无法弄清楚如何使用 .href 执行此操作，但如果这是一种更可取的方式，我可以修改。

目前有:

function scrollChange(id) {
    var winHeight = window.innerHeight;
    if (window.scrollBy(winHeight)) {
        document.getElementById(title).innerHTML = 'SomethingB';
    }

    else if (window.scrollBy(winHeight * 2)) {
        document.getElementById(title).innerHTML = 'SomethingC';
    }

    else {
        document.getElementById(title).innerHTML = 'somethingA';
    }
}

document.addEventListener('scroll', function() {scrollChange();});

DOM 操作目前无关紧要；只是想通过滚动获得正确的引用。请不要回答 JQuery。谢谢!!

Answer 1

根据反馈和测试完成重写:]

function scrollChange(id) {
    console.log('scroll w.height:['+ window.innerHeight +'] scroll:['+ window.scrollY +']');
    // start with the biggest value first
    if (window.scrollY > (window.innerHeight / 2)) {                                                                   
        document.getElementById(id).innerHTML = 'Something big';                                                       

    } else if (window.scrollY > (window.innerHeight / 3)) {                                                            
        document.getElementById(id).innerHTML = 'Something middle';                                                    

    } else {
        document.getElementById(id).innerHTML = 'Something small';                                                     
    }
}
window.addEventListener('scroll',function(){
        scrollChange('sticky');                                                                                        
    });

<div id="sticky" style="position:fixed;top:0px;line-height:2em;background:#fff">                                       
Sticky title (0)
</div>
<div style="margin-top:3em;line-height:3em">                                                                           
<p>This</p><p>is</p><p>just</p><p>padding</p><p>to</p>                                                                 
<p>test</p><p>scrolling</p><p>down</p><p>the</p>                                                                       
<p>page</p><p>and</p><p>this</p><p>is</p><p>more</p>                                                                   
<p>padding</p><p>to</p><p>test</p><p>scrolling</p>
<p>down</p><p>the</p><p>page</p>.</div>