안녕하세요. 명월입니다.
이 글은 Bootstrap에서 요소 고정(Affix)에 대한 글입니다.
우리가 웹 개발을 할 때, 메뉴나 광고 요소등을 스크롤에 관계 없이 고정을 해야할 때가 있습니다.
그러나 웹 요소는 전체 Document의 크기에 따라 위치를 결정합니다.
예를 들면 position:absolute; top:0px으로 설정을 합니다.
그리고 화면 스크롤이 있을 때, 화면을 아래로 내리게 되면 top:0px인 요소는 보이지 않게 됩니다. 또, position:fixed;를 하게 되면 스크롤에 따라 움직이기는 합니다만, fix로 요소가 빠져 나가 버리기 때문에 스크롤이 없는 요소에서는 디자인 배치가 엉망이 됩니다.
그래서 Affix로 화면을 고정합니다.
링크 - https://getbootstrap.com/docs/3.4/javascript/#affix
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 화면 상단에 고정한다. -->
<!-- data-spy는 affix로 설정하고 data-offset-top는 30으로 설정하면 세로 스크롤이 30을 넘어서면 position을 fix로 고정합니다. -->
<div data-spy="affix" data-offset-top="30" class="header-affix affix-item" style="background:green;height:30px;width:100%;">
header
</div>
<div style="font-size:25px;">
1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />
11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />
21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />
</div>
<!-- 화면 하단 고정 -->
<div class="footer-affix affix-item" style="background:green;height:30px;width:100%;">
footer
</div>
<script>
// 스크립트로 affxi 설정하는 방법
$('.footer-affix').affix({
offset: {
// 동적인 옵션으로 하단에 고정하는 것이다.
bottom: function () {
// 화면의 가장 하단을 계산한 것이다.
if(scrollY > 0){
return screen.height-window.innerHeight-scrollY;
} else {
return screen.height+30-window.innerHeight-scrollY;
}
}
}
});
</script>
</body>
</html>
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| offset | number | function | object | 10 | 스크롤 위치를 계산할 때 화면에서 오프셋 할 픽셀입니다. 단일 숫자가 제공되면 오프셋이 위쪽과 아래쪽 방향으로 적용됩니다. 고유 한 하단 및 상단 오프셋을 제공하려면 객체 오프셋 ({top : 10}) 또는 오프셋 : {top : 10, bottom : 5} 만 제공하면 됩니다. 오프셋을 동적으로 계산해야 할 때 함수를 사용하십시오. |
| target | selector | node | jQuery element | the window object | 접두사의 대상 요소를 지정합니다. |
affix의 이벤트가 있습니다. affix-top의 경우는 data-offset-top의 조건이 만족되어 affix-top class가 요소에 추가될 때 발생하는 것입니다.
affixed-bottom의 경우는 data-offset-top의 조건이 만족되어 affix-bottom class가 요소에 추가될 떄 발생하는 것입니다.
$('.affix-item').on('affix.bs.affix', function () {
// 이 이벤트는 요소가 부착되기 직전에 발생한다.
});
$('.affix-item').on('affixed.bs.affix', function () {
// 이 이벤트는 요소가 부착 된 후에 시작된다.
});
$('.header-affix').on('affix-top.bs.affix', function () {
// 이 이벤트는 affixed-top 요소가 부착되기 직전에 발생한다.
});
$('.header-affix').on('affixed-top.bs.affix', function () {
// 이 이벤트는 affixed-top 요소가 부착 된 후에 시작됩니다.
});
$('.footer-affix').on('affix-bottom.bs.affix', function () {
// 이 이벤트는 affixed-bottom 요소가 부착되기 직전에 발생합니다.
});
$('.footer-affix').on('affixed-bottom.bs.affix', function () {
// 이 이벤트는 affixed-bottom 요소가 부착 된 후에 시작됩니다.
});
affix는 top과 bottom이 있는데 bottom은 간혹 버그가 발생하네요.(요소가 사라집니다.)
자주 사용할 것 같이서 정리했는데.... 그닥 유용할 것 같진 않네요...
여기까지 Bootstrap에서 요소 고정(Affix)에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 이미지 슬라이딩 컨트롤(carousel) (0) | 2020.03.03 |
|---|---|
| [Bootstrap] 팝오버(popover) (0) | 2020.03.02 |
| [Bootstrap] 툴팁(tooltip) (0) | 2020.02.29 |
| [Bootstrap] 탭 (Tab) (0) | 2020.02.28 |
| [Bootstrap] Panel과 Thumbnails, Card (0) | 2020.02.27 |
| [Bootstrap] 페이징(Paging)와 페이저(pager) (0) | 2020.02.26 |
| [Bootstrap] 드롭 다운(Dropdown) (0) | 2020.02.24 |
| [Bootstrap] Collapse(메뉴 접기, 펴기)를 사용하는 방법 (0) | 2019.12.01 |