当我单击导航栏上的锚点时，它会将我带到那里，但部分内容被导航栏本身隐藏了

Question

所以我在网上看到了一些模板，当您单击导航栏上的锚点时，页面会将您带到该部分，并且分区完全对齐，这意味着您在页面顶部看到的内容（显然是在忽略导航栏的情况下） )，是该部门的顶部。

我尝试这样做，但是当我尝试时，一些内容被放在导航栏后面，有人知道如何解决这个问题吗？

我为“解决”这个问题所做的就是向部分块添加填充，但如果它完全对齐的话看起来会好很多。

这是模板：https://startbootstrap.com/theme/freelancer

模板的HTML和JavaScript如下所示（由于字符限制，我无法上传CSS），有人可以告诉我哪一段代码是这样做的吗？

这是 HTML 的一部分：

**<!-- Navigation-->
        <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
            <div class="container">
                <a class="navbar-brand" href="#page-top">Start Bootstrap</a>
                <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#portfolio">Portfolio</a></li>
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#about">About</a></li>
                        <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Masthead-->
        <header class="masthead bg-primary text-white text-center">
            <div class="container d-flex align-items-center flex-column">
                <!-- Masthead Avatar Image-->
                <img class="masthead-avatar mb-5" src="assets/img/avataaars.svg" alt="..." />
                <!-- Masthead Heading-->
                <h1 class="masthead-heading text-uppercase mb-0">Start Bootstrap</h1>
                <!-- Icon Divider-->
                <div class="divider-custom divider-light">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                    <div class="divider-custom-line"></div>
                </div>
                <!-- Masthead Subheading-->
                <p class="masthead-subheading font-weight-light mb-0">Graphic Artist - Web Designer - Illustrator</p>
            </div>
        </header>
<!-- About Section-->
        <section class="page-section bg-primary text-white mb-0" id="about">
            <div class="container">
                <!-- About Section Heading-->
                <h2 class="page-section-heading text-center text-uppercase text-white">About</h2>
                <!-- Icon Divider-->
                <div class="divider-custom divider-light">
                    <div class="divider-custom-line"></div>
                    <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                    <div class="divider-custom-line"></div>
                </div>
                <!-- About Section Content-->
                <div class="row">
                    <div class="col-lg-4 ms-auto"><p class="lead">Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional SASS stylesheets for easy customization.</p></div>
                    <div class="col-lg-4 me-auto"><p class="lead">You can create your own custom avatar for the masthead, change the icon in the dividers, and add your email address to the contact form to make it fully functional!</p></div>
                </div>
                <!-- About Section Button-->
                <div class="text-center mt-4">
                    <a class="btn btn-xl btn-outline-light" href="https://startbootstrap.com/theme/freelancer/">
                        <i class="fas fa-download me-2"></i>
                        Free Download!
                    </a>
                </div>
            </div>
        </section>**

这就是 JavaScript

    /*!
* Start Bootstrap - Freelancer v7.0.3 (https://startbootstrap.com/theme/freelancer)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
*/
//
// Scripts
// 

window.addEventListener('DOMContentLoaded', event => {

    // Navbar shrink function
    var navbarShrink = function () {
        const navbarCollapsible = document.body.querySelector('#mainNav');
        if (!navbarCollapsible) {
            return;
        }
        if (window.scrollY === 0) {
            navbarCollapsible.classList.remove('navbar-shrink')
        } else {
            navbarCollapsible.classList.add('navbar-shrink')
        }

    };

    // Shrink the navbar 
    navbarShrink();

    // Shrink the navbar when page is scrolled
    document.addEventListener('scroll', navbarShrink);

    // Activate Bootstrap scrollspy on the main nav element
    const mainNav = document.body.querySelector('#mainNav');
    if (mainNav) {
        new bootstrap.ScrollSpy(document.body, {
            target: '#mainNav',
            offset: 72,
        });
    };

    // Collapse responsive navbar when toggler is visible
    const navbarToggler = document.body.querySelector('.navbar-toggler');
    const responsiveNavItems = [].slice.call(
        document.querySelectorAll('#navbarResponsive .nav-link')
    );
    responsiveNavItems.map(function (responsiveNavItem) {
        responsiveNavItem.addEventListener('click', () => {
            if (window.getComputedStyle(navbarToggler).display !== 'none') {
                navbarToggler.click();
            }
        });
    });

});

这是模板的图片，我们可以看到，由于其背景颜色，分区非常清晰：

当我单击导航栏上的投资组合时，它会将其向下移动到所选部门的顶部：

当我在 HTML 文件上执行此操作时，它会将我带到所选部分，但该部分的顶部被导航栏本身隐藏。这是该部分的图片：

这是我单击导航栏中的锚点后的图片，正如我们所看到的，它确实将我带到了该部分，但标题被导航栏本身隐藏了，这在模板中不会发生。

为了解决这个问题，我只是在该部分添加了填充，但它看起来仍然不如模板

Answer 1

发生这种情况是因为下一页没有顶部的填充，因此默认设置为 0，您可以从内容的顶部添加填充，也可以将底部添加到中殿。

你可以尝试一下

.toppd{
   padding-top : 30px;
 }

将此课程添加到页面的第一个

<section>

或

<div>

Answer 2

您想要的是为固定标头的大小创建偏移量。

以下是一些解决方案：

1。在要滚动到的元素上使用

scroll-margin-top

。

例如，如果您有一个指向滚动容器内的 h2 的锚链接：

h2 {
  scroll-margin-top: 50px;
  scroll-snap-margin-top: 50px; /* iOS 11 and older */
}

/* If the browser supports the property... */
@supports (scroll-margin-top: 0;) {
  h2 {
    scroll-margin-top: 50px;
  }
}

（scroll-snap-margin-top 适用于 Safari 11 或更早版本 [macOS 和 iOS]）

参考：https://css-tricks.com/hash-tag-links-padding/

2。在目标上方创建伪元素以补偿固定标题高度： 您也可以对伪元素执行相同的操作：

h2::before {
  display: block;
  content: " ";
  height: 285px; /* Give height of your fixed element */
  margin-top: -285px; /* Give negative margin of your fixed element */
  visibility: hidden;
  pointer-events: none;
}

参考：https://fellowtuts.com/html-css/offsetting-anchor-hash-tag-links-to-adjust-for-fixed-header/

Answer 3

在这种情况下你应该使用 css z-index。

navbar {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

负值表示将被放在后面。您可以根据需要使用正数对许多 div 和其他元素进行索引。这段CSS可以将导航栏发送回来。