滾動更改部分javascript

Question

我想創建一個頁面，當用戶在瀏覽器中用鼠標或滾動條滾動到底部時，一個部分會發生變化，它也有 400 或任意數字。

同樣，當用戶滾動到頂部時，此更改會撤消。

當滾動底部

<h1>hello<h1> <!-- show 400px scroll bottom -->
<h1>my dear<h1><!-- show next 400px scroll bottom  mean 800px -->
<h1>friend<h1><!-- show next 400px scroll bottom mean 1200px -->

當滾動到頂部

<h1>friend<h1><!-- show next 400px scroll top mean 1200px -->
<h1>my dear<h1><!-- show  next 400px scroll top mean 800px -->
<h1>hello<h1> <!-- show  400px scroll top mean 400px -->

我的 html 代碼是

<div class="box">
<h1>hello<h1>
<h1>my dear<h1>
<h1>friend<h1>
</div>

我只想用 javascript 做到這一點

Answer 1

你可以使用這個代碼

window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop; // this is must to minus from a OfsetTop section before this
    var element = document.querySelectorAll('h1');
 console.log(Math.round(winScroll)); 
    for(var i = 0; i < element.length; i++){
        var min = 500 * i;
        var max = (1000 * i)-(500 * (i-1));
//         console.log(Math.round(winScroll));
    if(winScroll >= min && winScroll < max){
        element[i].className = "show";
         console.log(Math.round(winScroll)); 
    }else{
         element[i].className = 'hide';

    } 


    }


}