JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div style="position:fixed" id="test"></div>

<center>
<div id="div1" data-color="green">
    <p>Title goes Here</p>
    <a name="green">
        <p>Green area</p>
        Go To <a href="#red" style="color:red">Red area</a>
    </a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="div2" data-color="red">
    <a name="red">
        <p>Red area</p>
        Go To <a href="#blue" style="color:blue">Blue area</a>
    </a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div id="div3" data-color="blue">
    <a name="blue">
        <p>Blue area</p>
        Return To <a href="#green" style="color:green">Green area</a>
    </a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

</center>

</body>

CSS

body {
    background: green;
    transition: background  1.5s;
}

JavaScript

var test = document.getElementById("test");

document.onscroll = function() {

		scrollTop = document.documentElement.scrollTop;
    test.innerHTML = scrollTop;
    
    allDivs = document.getElementsByTagName('div');

    for( i=0; i< allDivs.length; i++ )
    {
    		curDiv = allDivs[i];
        
        
        // The code below makes the background color change when the 						scroll top passes the 2/3 of the previous div.
        
        heightBefore = 0;    
        if (i > 0){
        		heightBefore = allDivs[i-1].offsetHeight / 3;
        }
        
        if (scrollTop > curDiv.offsetTop - heightBefore){
        		color = curDiv.getAttribute("data-color");
          	document.body.style.background = color;
        }
                
    }
};