1

I have been making a navigation menu for a small project I'm making but because of my lack of knowledge in codeing, I got stuck.

I have attached a link to the navigation code and I can't seem to make it scroll from section to section on one mwheeldown.

In simple words: I want to skip to the next section each time I scroll down. https://codepen.io/tonyexe/pen/NVrjJp

$(".navigation-container-versia a[href^='#']").on('click', function(event) {
if (this.hash !== "") {
    event.preventDefault();

    var hash = this.hash;

    $('html, body').animate({scrollTop: $(hash).offset().top}, 500);
}
});

function getTargetTop(elem){
    var id = elem.attr("href");
    var offset = 60;
    return $(id).offset().top - offset;
}

$(window).on("load scroll", function(e){
    isSelected($(window).scrollTop())
});

var sections = $(".navigation-container-versia a[href^='#']");

function isSelected(scrolledTo){
    var threshold = 100;
    var i;

for (i = 0; i < sections.length; i++) {
    var section = $(sections[i]);
    var target = getTargetTop(section);

    if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
        sections.removeClass("active");
        section.addClass("active");
    }
};
Tony Mor
  • 15
  • 2
  • You say, '*I want to skip to the next section each time I scroll down,*' what about scrolling up? How does your script know what the "next" section is if we're mid-page? I don't see any events in your script regarding mouse wheel events, what have you tried? – Twisty May 26 '19 at 17:13
  • Consider the following: https://stackoverflow.com/questions/14926366/mousewheel-event-in-modern-browsers – Twisty May 26 '19 at 17:22
  • I want the same effect when scrolling up, I'm still learning to code thus the code is very poor. thanks for the link. – Tony Mor May 27 '19 at 10:02

0 Answers0