Thank you Richard.
I finally got it to work. I basically had to learn the beginner html CSS and JS to get it working.
Here is the code i used in the end. Its basically the same as you and @hx used. I just added some notes and Debug lines that helped me understanding the code. I hope its easier for the next one and that you integrate this feature in an Update?
<script>// Make sure every ROW on your Page in which you want to have a menu point has an CLASS called "menu-section" and an ID corresponding to the link in the menu.
jQuery(function ($) {
$(window).scroll(function () {
$('nav.primary a').addClass('menu-active') //"nav a" only works if you dont have a phone layout. Better to use "nav.primary a"
var scrollPos = $(window).scrollTop(); //current scroll position from top of document
//console.log("START");
//console.log("SP" + scrollPos);
$('.menu-section').each(function (i) { //".menu-section" links to the class you gave the Item on your page.
//console.log( index + ": " + $( this ).text() );
var topPosi = $(this).offset().top; //topPos is the number of pixels from the top of the closest relatively positioned parent element.
//console.log ($(this));
//console.log("TP" + topPosi);
//console.log("INTERMEDIATE");
if ((topPosi - scrollPos) <= 500) { //The Number is a Treshold for the Position at which the Menu Point switches.
$('.menu-active').removeClass('menu-active');
$('nav.primary a').eq(i).addClass('menu-active');
//console.log("END_if_true");
}
})
});
});
</script>
And the corresponding CSS:
.primary .menu-active {
color: white;
}