처음 공식 홈페이지에서 부트스트랩(bootstrap)을 접했을 때 자바스크립트 편에 Affix를 설명했으나 몰라 그냥 넘어갔습니다. 그리고 여러 테마와 템플릿을 보니 스크롤을 하면 일정 부분에 와서 메뉴가 고정되는 것이 멋있다고 느꼈습니다. 예로 스크롤을 아래로 움직이면 특정 부분이 계속 올라가 안 보이는 것이 아니라 특정 부분은 고정되어 계속 보이는 것입니다. 그러나 여기에 있던 Affix 예제를 보니 어느 정도 알게 되었습니다. 전에도 말했지만 비록 거기는 영어지만 예제가 많기 때문에 이해하는데 도움이 됩니다.
그래서 이 블로그가 부트스트랩을 사용하니 아직 100% affix 기능을 파악하지 못했지만 적용해 봤습니다. 우선 제가 알고 있는 일정 부분을 내려오면 윗부분이 고정되는 것만 적용해 보았습니다. 이 글에서는 위에서 50 픽셀 내려오면 고정되도록 설정했습니다. 스마트폰 등에서는 고정 부분이 나타나지 않게 했으므로 안 보입니다. 그리고 스크립트 로딩이 된 후에 확실히 볼 수 있습니다.
그런데 이 블로그에서 제대로 보기 위해서는 글이 있는 부분보다는 이 블로그 다른 부분인 공지, 태그, 미디어,방명록 등에서 봐야 합니다. 글에서는 글에 집중할 수 있도록 효과 등을 자제하거든요. 동영상 배경이 있는 고정된 것도 안 보이고요. 아래 그림을 보듯이 공지에서는 50 픽셀이 아니라 450 픽셀 스크롤을 내리면 헤더가 고정 되도록 했습니다. 그러니 affix를 제대로 볼 수 있는 것입니다.
그나저나 여기에서 설명한 affix는 부트스트랩 자바스크립트에 대한 설명이었습니다. 부트스트랩에만 affix 효과가 있나 ???? 모르겠습니다. 참고로 한글 부트스트랩에서는 aiffix를 메뉴라고 의역했네요. 나중에 affix를 사용한 부트스트랩 무료 테마와 템플릿을 소개하겠습니다. 여담으로 제가 부트스트랩 affix에 대한 이해가 부족해 많이 적지 못했네요. 자세히 알고 싶다면 한글 부트스트랩에서 보세요.
예제를 보니 부트스트랩 affix 기능 좋은 것 같은데 100% 이해하지 못해 아쉽습니다. 나중에 100% 이해된 후 추가하겠습니다. 외국 사이트에 사이트 메뉴가 스크롤을 내리면 사이드바 메뉴와 위쪽 메뉴가 고정되는 것 많이 봤는데 우리나라 사이트에서는 고정만 된 것을 많이 본 것 같습니다.
PC,스마트폰 팩스 OK
'IT.인터넷.생활 관련 > 부트스트랩' 카테고리의 다른 글
| 익스플로러, 골치 아픈 낮은 버전 (2) | 2016.02.10 |
|---|---|
| 부트스트랩,ScrollSpy (0) | 2016.01.26 |
| 이미지확대,bootstrap은 사용자가 많으면서 쉽다는 것을 느꼈다. (4) | 2016.01.23 |
| 부트스트랩 affix 테마와 템플릿 (0) | 2016.01.13 |
| 부트스트랩 토글,감추고 보이기 2 (0) | 2015.12.18 |
| 부트스트랩 토글,감추고 보이기 1 (2) | 2015.12.15 |
| 부트스트랩 테마, 동영상 배경 2 (0) | 2015.12.10 |
| 부트스트랩 테마, 동영상 배경 1 (2) | 2015.12.07 |
