상단메뉴 고정(fixed) 후 페이지 내에서 이동시 위치 안맞을때 정보
상단메뉴 고정(fixed) 후 페이지 내에서 이동시 위치 안맞을때- onlymilk47 자기소개 아이디로 검색 전체게시물 회원게시물
- 4,421
본문
상단메뉴 고정후에 (fixed) 앵커(anchor)을 이용하셔서
페이지내에 이동을 하면 상단이 잘리는 경우가 있습니다
그때 아래와 같이 하시면 상단이 안 잘리고 나오게 됩니다
<ul>
<li><a href="#link1">link1</a></li>
<li><a href="#link2">link2</a></li>
<li><a href="#link3">link3</a></li>
</ul>
위와 같이 페이지내에 링크를 걸고
아래와 같이 페이지로 연결시에
<div class="link" id="link1"></div>
.....
<div class="link" id="link2"></div>
.....
<div class="link" id="link3"></div>
아래와 같이 span 을 추가하시고 아이디 값을 변경하신후
<span class="anchor" id="link1"></span>
<div class="link" id="link1con"></div>
.....
<span class="anchor" id="link2"></span>
<div class="link" id="link2con"></div>
.....
<span class="anchor" id="link2"></span>
<div class="link" id="link3con"></div>
아래와 같이 스타일일을 적용해 주시면 됩니다
<style>
.anchor{
display: block;
height: 131px; /*고정헤더와 동일한 높이*/
margin-top: -131px; /*고정헤더와 동일한높이*/
visibility: hidden;
}
</style>
2