o

상단메뉴 고정(fixed) 후 페이지 내에서 이동시 위치 안맞을때

· 2018-09-28 (금) 00:29:03 · 7129 · 3

상단메뉴 고정후에 (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>
 

|

댓글 3개

좋은 정보 감사합니다~
감사합니다
2023-02-04 (토) 08:05:03
좋은 정보 감사합니다
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
18-10-23 조회 1.3만
18-10-22 조회 9,811
18-10-21 조회 6,590
18-10-21 조회 6,224
18-10-20 조회 6,141
18-10-18 조회 7,189
18-10-17 조회 7,847
18-10-15 조회 6,399
18-10-14 조회 1.2만
18-10-12 조회 1.7만
18-10-10 조회 6,640
18-10-10 조회 7,678
18-10-10 조회 5,191
18-10-08 조회 5,625
18-10-08 조회 1.1만
18-10-06 조회 8,530
18-10-04 조회 1.4만
18-10-03 조회 7,147
18-10-02 조회 6,921
18-10-02 조회 6,160
18-09-29 조회 5,643
18-09-28 조회 7,130
18-09-21 조회 1만
18-09-20 조회 9,034
18-09-17 조회 7,310
18-09-13 조회 7,543
18-09-12 조회 6,368
18-09-05 조회 8,941
18-09-05 조회 6,721
18-09-02 조회 9,626