Update URL in browser while scrolling a page in gatsby [duplicate] - reactjs

Question

Is it possible to change the URL in the address bar instantly when I scroll to an id? Or have a long document with multiple id and the url changes on address bar, when I hit a new id even i scroll form bottom to top.
i use Change url when manually scrolled to an anchor?
but this is not working when scroll from bottom to top.
$(function () {
var currentHash = "#";
$(document).scroll(function () {
$('.block').each(function () {
var top = window.pageYOffset;
var distance = top - $(this).offset().top;
var hash = $(this).attr('id');
// 30 is an arbitrary padding choice,
// if you want a precise check then use distance===0
if (distance < 30 && distance > -30 && currentHash != hash) {
window.location.hash = (hash);
currentHash = hash;
}
});
});
});
body {
margin: 0px;
}
div {
height: 900px;
text-align: center;
padding: 15px;
background-color: #00f;
}
div:nth-child(even) { background: #ccc; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="block" id="one">Block 1</div>
<div class="block" id="two">Block 2</div>
<div class="block" id="three">Block 3</div>
<div class="block" id="four">Block 4</div>
<div class="block" id="five">Block 5</div>
Thanks in advance.

Answer 1

After your comment, I understand what you are trying to achieve:
The following code is based on scroll up/ down.
Will store the current block and make you "jump" between blocks:
$(function () {
var blocksArr = $('.block');
var lastScrollTop = 0;
var currentBlock = 0;
$(document).scroll(function () {
var st = $(this).scrollTop();
var hash;
//make sure it is in the boundaries
if (st > lastScrollTop && currentBlock< blocksArr.length -1){
// downscroll code
hash = $(blocksArr[++currentBlock]).attr('id');
window.location.hash = (hash);
}
else
if (st < lastScrollTop && currentBlock > 0){
// scrollup code
hash = $(blocksArr[--currentBlock]).attr('id');
window.location.hash = (hash);
}
lastScrollTop = $(this).scrollTop();
});
});
"working" fiddle (hash wont change on fiddle)
added:
If you only want to see the URL changes:
$(function () {
var currentHash = "#";
var blocksArr = $('.block');
$(document).scroll(function () {
var currentTop = window.pageYOffset/1;
for (var i=0; blocksArr.length; i++){
var currentElementTop = $(blocksArr[i]).offset().top;
var hash = $(blocksArr[i]).attr('id');
if (currentElementTop < currentTop && currentTop < currentElementTop + $(blocksArr[i]).height() && currentHash!=hash){
if(history.pushState) {
history.pushState(null, null, '#'+hash);
}
else {
location.hash = '#'+hash;
}
currentHash = hash;
}
}
});
});