Question

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

$('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/

Answer 1

您可以添加scrollPosition和导航栏的高度（80px），以便在导航底部点击该部分后更改：

JS Fiddle

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。为此：

在加载或调整文档大小时捕获变量中nav的高度：

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

并在任何地方输入变量名称＆＃34; 80＆＃34;本来可以放置。

JS Fiddle - With variable

固定标题隐藏内容的顶部

1 个答案: