0

我正在开发一个顶部有固定标题的网站。但是，当我导航到锚点时，开始内容被标题隐藏了。有没有更好的方法来抵消我正在使用的代码。我认为这与下面的行有关。整个脚本在下面的小提琴中。

$('a[href^="#"]').on('click', function (e) {
    e.preventDefault();
    $(document).off("scroll");

    $('a').each(function () {
        $(this).removeClass('active');
    })
    $(this).addClass('active');
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 500, 'swing', function () {
        window.location.hash = target;
        $(document).on("scroll", onScroll);
    });
});

https://jsfiddle.net/QuirkCHROMA/d5pp652r/2/

4

1 回答 1

1

您可以添加scrollPosition导航栏的高度和高度（80 像素），以便在导航底部到达该部分时更改：

JS小提琴

if (refElement.position().top <= scrollPosition + 80 && refElement.position().top + refElement.height() > scrollPosition + 80 )

并滚动到部分。减去导航栏的高度：

$('html, body').stop().animate({
     'scrollTop': $target.offset().top - 80
}, 500, 'swing', function () {
    window.location.hash = target;
    $(document).on("scroll", onScroll);
});

缓存高度- Joseph Marikle 推荐

您可以做的另一件事是将高度设置为变量，而不是在需要的任何地方手动放置 80。这也将允许您更改导航的高度，而无需返回并编辑您的 JS。为此：

当文档被加载或调整大小时，在变量中捕获导航的高度：

$(window).on('load resize', function () {
    headerHeight = $('header').height();
});

并在任何放置“80”的地方输入该变量名。

JS Fiddle - 带变量

于 2015-11-27T18:11:05.577 回答