J.BF Story

[CSS] 고정 헤더에서 anchor 기능 사용 시 오프셋 설정 본문

FrontEnd/CSS

[CSS] 고정 헤더에서 anchor 기능 사용 시 오프셋 설정

J.BF 2022. 7. 7. 18:13

상단에 고정 헤더를 가진 웹페이지에서#anchor 를 통해 해당 anchor로 스크롤 할 시 고정 헤더에 의해 가려져 안보이는 현상이 일어났다.

테스트 코드는 다음과 같다.

<style>
    * {
        margin: 0;
        padding: 0;
    }

    :root {
        --header-height: 100px;
    }

    header {
        position: fixed;
        background-color: gray;
        color: white;
        width: 100%;
        height: var(--header-height);
        display: flex;
        align-items: center;
        font-size: 1.5rem;
        padding: 0 50px;
        font-weight: bold;
        opacity: 0.6;
    }

    .main-wrap {
        padding-top: var(--header-height);
        width: 1180px;
        margin: 0 auto;
    }
    
    .item {
        margin-bottom: 150px;
    }

    .item * {
        padding: 5px 10px;
    }

    h1 {
        padding: 200px 0px;
        color: darkseagreen;
        background-color: lightcyan;
    }

    h2 {
        background-color: darkseagreen;
        font-size: 1.3em;
    }
</style>

<header>
    header
</header>

<div class="main-wrap">
    <h1>welcome to anchor test</h1>

    <div id="test-anchor1" class="item">
        <h2>test-anchor1</h2>
        <p>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
        </p>
    </div>
    
    <div id="test-anchor2" class="item">
        <h2>test-anchor2</h2>
        <p>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
        </p>
    </div>

    <div id="test-anchor3" class="item">
        <h2>test-anchor3</h2>
        <p>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
        </p>
    </div>

    <div id="test-anchor4" class="item">
        <h2>test-anchor4</h2>
        <p>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
        </p>
    </div>
</div>

[offset 적용 전] '#test-anchor1'을 통해 'test-anchor1' 요소로 스크롤한 경우

 

 

 

이 경우 다음과 같이 고정 헤더 높이 만큼의 공간을 차지하는 <span>을 만들어 여기에 anchor id를 설정해 오프셋을 준다.

이 오프셋은 'height'를 통해 'item' 요소에 헤더만큼의 공간을 차지하도록 도와주지만 'margin-top'을 통해 헤더만큼의 외부 공간을 제외하기 때문에 전체적인 레이아웃에는 영향을 주지 않는다.

.anchor {
    display: block;
    height: var(--header-height);
    margin-top: calc(var(--header-height)*-1);
    visibility: hidden;
}
</style>

<div class="item">
    <span class="anchor" id="test-anchor1"></span>
    <h1>test-anchor1</h1>
</div>

 

 

오프셋을 적용한 테스트 코드는 다음과 같다.

<style>
    * {
        margin: 0;
        padding: 0;
    }

    :root {
        --header-height: 100px;
    }

    header {
        position: fixed;
        background-color: gray;
        color: white;
        width: 100%;
        height: var(--header-height);
        display: flex;
        align-items: center;
        font-size: 1.5rem;
        padding: 0 50px;
        font-weight: bold;
        opacity: 0.6;
    }

    .main-wrap {
        padding-top: var(--header-height);
        width: 1180px;
        margin: 0 auto;
    }
    
    .item {
        margin-bottom: 150px;
    }

    .item * {
        padding: 5px 10px;
    }

    h1 {
        padding: 200px 0px;
        color: darkseagreen;
        background-color: lightcyan;
    }

    h2 {
        background-color: darkseagreen;
        font-size: 1.3em;
    }

    .anchor {
        display: block;
        height: var(--header-height);
        margin-top: calc(var(--header-height)*-1);
        visibility: hidden;
    }
    
</style>

<header>
    header
</header>

<div class="main-wrap">
    <h1>welcome to anchor test</h1>

    <div class="item">
        <span class="anchor" id="test-anchor1"></span>
        <h2>test-anchor1</h2>
        <p>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
            This is test-anchor1<br/>
        </p>
    </div>
    
    <div class="item">
        <span class="anchor" id="test-anchor2"></span>
        <h2>test-anchor2</h2>
        <p>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
            This is test-anchor2<br/>
        </p>
    </div>

    <div class="item">
        <span class="anchor" id="test-anchor3"></span>
        <h2>test-anchor3</h2>
        <p>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
            This is test-anchor3<br/>
        </p>
    </div>

    <div class="item">
        <span class="anchor" id="test-anchor4"></span>
        <h2>test-anchor4</h2>
        <p>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
            This is test-anchor4<br/>
        </p>
    </div>
</div>

[offset 적용 후] '#test-anchor1'을 통해 'test-anchor1' 요소로 스크롤한 경우

 

'FrontEnd > CSS' 카테고리의 다른 글

[CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (background)  (0) 2022.07.10
[CSS] 전체 요소에 font-family 적용하기  (0) 2022.07.08
[CSS] 가상요소 ::after ::before와 svg를 이용하여 요소 꾸며주기 (content url)  (0) 2022.07.06
[CSS] absolute 요소 컨테이너 외부에 배치하기  (0) 2022.07.05
[CSS] Flex에서 글자 라인 맞추기  (0) 2022.07.04
'FrontEnd/CSS' Related Articles more
Comments