0

I am trying to program a little script which should change the active tab when the offset of the current section is <= 0. I am running a function on every scroll event which should get the distance of every section in the body and calculate the current distance - if the distance is 0, it should be updated and the appropriate element should be set active.

I searched the web and found this solution - however the distance does not change and stays the same. 

function scrollPage() {
      var sections = document.getElementsByTagName('section');
    for (var i = 0; i < sections.length; i++) {
        console.log(sections[i].offsetTop - document.body.scrollTop);
    }
}
html {
    width: 100%;
}

body {
    height: 100%;
    margin: 0;
}

.body {
    position: absolute;
    height: auto;
    width: auto;
    padding-top: 32px;
    padding-bottom: 8px;
    margin: 48px 0 72px 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
}
<html>
<body>
<div class="body" onscroll="scrollPage()">
<section id="section1">
<h1>Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section2">
<h1>Other text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
</div>
</body>
</html>

I know that there are ways to do this with JQuery - however I would like to avoid using JQuery so I would be happy if somebody can point out my error.

Best regards and thank you in advance,

Mou
  • 113
  • 2
  • 14
  • Perhaps this can help? https://stackoverflow.com/questions/4096863/how-to-get-and-set-the-current-web-page-scroll-position – Ioannis Papadopoulos Jul 14 '18 at 22:07
  • First of all, js is single threaded so using a `for` loop will "pause" execution until its done. Aka, any changes made in the loop wont be reflected in the dom until after the loop is done. You should look into using [setinterval](https://www.w3schools.com/jsref/met_win_setinterval.asp) instead. – Olian04 Jul 14 '18 at 22:21

0 Answers0