Smooth scrolling effect issue

Question

This is an add-on question from my previous post: Smooth scrolling link effect issue with vertical menu

I'm revising a template https://codepen.io/eksch/pen/xwdOeK to fit with my site contents. The length of my sections will be way longer than how the template is designed. From the javascript, the smooth scrolling effect is closely related to the position of the browser and section divs, such that:

$(window).scroll(function() {
    var scrollDistance = $(window).scrollTop();

    // Show/hide menu on scroll
    //if (scrollDistance >= 850) {
    //      $('nav').fadeIn("fast");
    //} else {
    //      $('nav').fadeOut("fast");
    //}

    // Assign active class to nav links while scolling
    $('.page-section').each(function(i) {
            if ($(this).position().top - $(this).height() <= scrollDistance) {
                    $('.navigation a.active').removeClass('active');
                    $('.navigation a').eq(i).addClass('active');
            }
    });
}).scroll();

Is it possible to increase the length of the sections to be 100% or greater and still maintain the effect? ( the default length is not big enough for my contents) I tried to adjust the last section div to 100% and the highlight effect stopped working, and there is a trailing white space after the div.

Trailing space:

I'm pretty new to front end, and I'd appricate for any suggestions or help on the issue. Thanks!

Answer 1

I played around with your CSS, and I think this is what you want.

// in .page-section
height: 90%;
width: 64%;
margin-left: 30%;
margin-top: 4%;

// in .navigation
margin-left: 0%;
height: 100%;
top: 0;

you can check my updated CodePen

Edit

For it to

work if the section length requires scrolling down

or to

allow for contents that exceed the browser height

just change height: 90%; to min-height: 90%; in .page-section

check the CodePen above for the updated code.