jquery - 滚动到单页网站中具有偏移量的部分？

Question

我正在尝试使用自动事件类进行单页导航并平滑滚动并且工作正常但问题是因为我的导航固定在顶部因此滚动后它覆盖了我的标题一点点。

我通过在我的代码中添加“top - 75”来修复它，但之后滚动到我的上一节的某个部分时，激活类而不是 View 中的类。

var links = $('.nav').find('li');
slide = $('.slide');
button = $('.button');
mywindow = $(window);
htmlbody = $('html,body');


slide.waypoint(function (event, direction) {

    dataslide = $(this).attr('data-slide');

    if (direction === 'down') {
        $('.nav li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
    }
    else {
        $('.nav li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
    }

});

mywindow.scroll(function () {
    if (mywindow.scrollTop() == 0) {
        $('.nav li[data-slide="1"]').addClass('active');
        $('.nav li[data-slide="2"]').removeClass('active');
    }
});

function goToByScroll(dataslide) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top - 75
    }, 1000, 'swing');
}



links.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);
});

button.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);

});

Answer 1

看来您需要在 Waypoint 中设置一个 offset功能，因此在设置 .active 类之前，必须看到超过 75px 的空间。

slide.waypoint(function(event, direction) {
  // your other stuff
}, { offset: '50%' })

// only trigger when element reaches half way in the view-port
// Can set to pixels (offset: 100)

问题是，我不知道这个 offset 设置是否只适用于元素的顶部，或者它也适用于底部 - 没时间阅读。尝试一下，如果它不起作用，您可能需要阅读该设置的其他实现，以使其在您的元素中起作用。您也可以将 75 像素的导航栏设为半透明。