Search code examples
javascripthtmlcssbootstrap-4smooth-scrolling

Smooth scrolling link effect issue with vertical menu

I'm trying to fix a problem on this template: https://codepen.io/eksch/pen/xwdOeK

The highlighting effect on the navigation menu only works on a reduced browser height, if I resize the window to full screen (https://codepen.io/eksch/full/xwdOeK) and scroll down to section 7, the link on the navigation menu will not be highlighted. (I'm viewing from a 27 in imac)

enter image description here

In the javascripts, I believe this funciton controls the link highlight: $(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 <= scrollDistance) {
                    $('.navigation a.active').removeClass('active');
                    $('.navigation a').eq(i).addClass('active');
            }
    });
}).scroll();

Is there a way that I change the code to adapt to all screen size? And how should I make the section interactive with bootstrap?

I'm stil new to front-end development, appriciate for any help!

Solution

  • Fix your if statement:

    if ($(this).position().top - $(this).height() <= scrollDistance)