Ensure that the most top section on the screen is activated when scrolling

Indeed when scrolling if there was more than 1 section on the screen the last one was activated.

This is weird for the user: when someone click on #sectionX, #sectionX is activated a few ms and the next section #sectionX+1 is activated.

In order to correct that I reverse the order of parsing (bottom to top) when setting active css class, to ensure the most top section is activated.