Html 如何链接到页面上某个部分的顶部减去固定导航条的高度？

当我单击固定导航栏上的链接时，它会跳到页面上的特定部分，但固定导航栏的高度会溢出。我怎样才能减去那个高度？这需要javascript/jquery吗

<div id="fixedNavWrapper">
    <div id="navLinks">
        <ul>
            <li><a href="#about">ABOUT ME</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
        </ul>
    </div>
</div>

<section id="about" class="section">
    <h2>ABOUT ME</h2>
</section>

---

我认为你不能用css来做。但是，您可以使用jQuery来完成这项工作。很简单：

HTML（向li元素添加类以在jQuery代码中标识它们）：

更一般一点：

$('.navbar li a').click(function () {

    var speed = 500;
    var easing = 'swing';
    var topMargin = 10;

    var href = $(this).attr("href");
    var name = href.substr(href.indexOf("#") + 1);
    var $link = $("a[name='" + name + "']");

    positionabout = $link.offset().top - $('.navbar').height() - topMargin;
    $("html, body").animate({scrollTop: positionabout}, speed, easing);

    return false;
});

这被称为“固定导航栏覆盖锚链”，有很多解决方案。我用这个：

<div id="fixedNavWrapper">
    <div id="navLinks">
        <ul>
            <li class="about"><a href="#about">ABOUT ME</a></li>
            <li class="portfolio"><a href="#portfolio">PORTFOLIO</a></li>
        </ul>
    </div>
</div>

<section id="about" class="section">
    <h2>ABOUT ME</h2>
</section>

$('li.about').click(function(){
 positionabout = $('#about').offset().top - $('#fixedNavWrapper').height(); // Position of #about - nav height = correct position
 $("html, body").animate({scrollTop:positionabout}, '500', 'swing');
})
$('li.portfolio').click(function(){
 positionport = $('#portfolio').offset().top - $('#fixedNavWrapper').height();
 $("html, body").animate({scrollTop:positionport}, '500', 'swing');
})

$('.navbar li a').click(function () {

    var speed = 500;
    var easing = 'swing';
    var topMargin = 10;

    var href = $(this).attr("href");
    var name = href.substr(href.indexOf("#") + 1);
    var $link = $("a[name='" + name + "']");

    positionabout = $link.offset().top - $('.navbar').height() - topMargin;
    $("html, body").animate({scrollTop: positionabout}, speed, easing);

    return false;
});