Смещение html-якоря для корректировки фиксированного заголовка с использованием сетки - PullRequest
0 голосов
/ 17 января 2019

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

и многие другие.

1 Ответ

0 голосов
/ 18 января 2019

Вот что у меня сработало:

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>

Надеждаэто помогает кому-то в будущем.

Спасибо

...