Question

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

我通过在我的代码中添加'top - 75'来修复它，但在此之后滚动到一个部分我的上一部分让活跃的课程不是那个在视野中的人。

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设置是否仅适用于元素的顶部，或者它也适用于底部 - 没有时间阅读。尝试一下，如果它不起作用，您可能希望阅读该设置的其他实现，以使其在您的项目中工作。您也可以将75px导航栏设置为半透明。

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

1 个答案: