Search code examples
javascripthtmlcsssmooth-scrolling

Smooth scrolling effect issue

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.

enter image description here

Trailing space:

enter image description here

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

Solution

  • 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.