使用网格偏移 html 锚以调整固定标题答案

【问题标题】：Offsetting an html anchor to adjust for fixed header using grid使用网格偏移 html 锚以调整固定标题
【发布时间】：2020-05-24 02:22:31
【问题描述】：

我正在尝试使用修复标头获取锚点的正确位置，但它不起作用。我已经尝试过 stackoverflow 和许多其他站点提供的解决方案。我无法制定任何解决方案来正常工作。

不知道是不是因为我使用了网格和视口单位。

我的目标是了解如何仅使用 Html 和 css 使其工作，以及为什么我无法按照给出的解决方案使其工作。

可以看到html和css：

https://codepen.io/sevaro/pen/GPLeyE

    /* css*/ 
    #container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 8vh 92vh 92vh 92vh;
        grid-template-areas: 
            "m"
            "a"
            "w"
            "c";
        }
    nav {
        grid-area: m;
        background-color: grey;
        display: flex;
        flex-flow: row;
        justify-content: flex-end;
        align-items: center;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }    
    .about {
        grid-area: a;
        background-color: blue;
        padding-right: 10px;
    }
    .work {
        grid-area: w;
        background-color: green;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        align-items: center;
    }
    .contact {
        grid-area: c;
        background-color: yellow;
    }
/* html */
    <div id="container">

        <nav>
            <div class="ab"><a href="#whoami">About</a></div>
            <div class="wo"><a href="#whativedone">Work</a></div>
            <div class="co"><a href="#contactme">Contact</a></div>
        </nav>


        <article class="about" id="whoami">
        </article>

        <article class="work" id="whativedone">
            <div class="project">
                <img height="50px" width="50px" alt="Project 1">
                <p>Project 1</p>
            </div>            
            <div class="project">
                <img height="50px" width="50px" alt="Project 2">
                <p>Project 2</p>
            </div>            
            <div class="project">
                <img height="50px" width="50px" alt="Project 3">
                <p>Project 3</p>
            </div>            
            <div class="project">
                <img height="50px" width="50px" alt="Project 4">
                <p>Project 4</p>
            </div>            
            <div class="project">
                <img height="50px" width="50px" alt="Project 5">
                <p>Project 5</p>
            </div>            
        </article>

        <article class="contact" id="contactme">
        </article>

非常感谢任何帮助。

谢谢

我试过这些：http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/

这些也是：https://www.wikitechy.com/technology/css-offsetting-html-anchor-adjust-fixed-header/

还有很多其他的。

【问题讨论】：

嘿塞尔吉奥，如果您没有在标题（导航标签）上设置网格，这将有助于解决您的一些问题，这将导致您的标题大小波动，使其更难计算为了。如果您有更多代码（内容），如果您也发布它会对我们有所帮助。谢谢，祝你好运
我不确定您到底需要做什么。你能解释一下吗？
@sergio 这是不正确的。你能告诉你你到底想要什么。谢谢
首先，感谢您的回复。
首先，感谢您的回复。我在作为容器的 div 中定义了一个网格。在网格内部，我定义了 4 行：导航菜单、关于部分、工作部分和联系部分。在导航内部，我有一个 flexbox 在右侧显示三个 div（三个链接）。导航中的每个链接都有一个指向文档内部分的锚点。问题是显示的部分放错了位置。我尝试了很多解决方案，但都没有奏效。我希望这个解释更清楚。感谢您的帮助。

标签： html css anchor

【解决方案1】：

尝试使用scroll-margin-top，它是pretty widely adopted。

只需将以下 CSS 添加到您要滚动到的元素：

.element {
  scroll-margin-top: 2em;
}

【讨论】：

请注意，scroll-margin 不会继承，因此您不能像html { scroll-margin-top: 10vh; } 那样只设置一次。但是，:target { scroll-margin-top: 10vh; } 应该可以正常工作。

【解决方案2】：

这对我有用：

CSS

h2{
    position:relative;
}
h2 > a{
    position:absolute;
    top: -12.5vh;
}

HTML

<nav>
    <div><a href="#whoami">About</a></div> <!––Link-->
</nav>

<article>
     <h2><a id="whoami"></a>ABOUT</h2> <!––Anchor-->
</article>

希望这对将来的某人有所帮助。

谢谢

【讨论】：