Question

嗨，尝试让粘贴标题内的文字相对于距离页面顶部的距离有所变化。假设我有一个单页网站，有几个不同的部分，每个部分测量100vh。导航通过href =＆＃34; #sectionA＆＃34;，＆＃34; #sectionB＆＃34;等链接到他们。

因此，如果我从着陆页开始并向下滚动到＆＃34; sectionA＆＃34;标题应更改为该部分标题。无法使用.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>

根据距页面顶部的距离更改粘性标题文字

1 个答案: