如何在一个mwheeldown上逐节滚动

时间:2019-05-26 08:28:58

标签: javascript jquery html css jquery-ui

我一直在为一个正在做的小项目制作导航菜单,但是由于缺乏编码知识,我陷入了困境。

我在导航代码上附加了一个链接,但似乎无法使它在一个mwheeldown上逐节滚动。

简单来说:每次向下滚动时,我都想跳到下一部分。 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");
    }
};

0 个答案:

没有答案