Я пытаюсь получить правильную позицию якоря с фиксированным заголовком, но это не сработает. Я пробовал решения, предоставленные в 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/
и многие другие.