Wie man eine Onepager-Navi mit active Links austattet

Hier der JavaScript-Code

<script type="text/javascript">
(function($) {
$(document).ready(function() {
    var navChildren = $("#top-menu li").children();
    var aArray = [];
    for (var i = 0; i < navChildren.length; i++) {
        var aChild = navChildren[i];
        var ahref = $(aChild).attr('href');
        aArray.push(ahref);
    }
    $(window).scroll(function() {
        var windowPos = $(window).scrollTop();
        var windowHeight = $(window).height();
        var docHeight = $(document).height();
        for (var i = 0; i < aArray.length; i++) { var theID = aArray[i]; var secPosition = $(theID).offset().top; secPosition = secPosition - 135; var divHeight = $(theID).height(); divHeight = divHeight + 90; if (windowPos >= secPosition && windowPos < (secPosition + divHeight)) {
                $("a[href='" + theID + "']").parent().addClass("active");
            } else {
                $("a[href='" + theID + "']").parent().removeClass("active");
            }
        }
    });
 
});
})(jQuery);
</script>

Der JS-Code wird hier eingetragen

Und hier das CSS für die aktiven Links

#top-menu .active a{
  color: #c3095f!important;
}
#top-menu .active a:after{
  content: '';
  border-bottom: 2px solid #c3095f;
  display: block;
  width: 100%;
  position: relative;
  top: 8px;
}

Der CSS-Code wird hier eingetragen