페이지의 오른쪽 또는 왼쪽에 고정되는 퀵메뉴나 소셜바(Social bar), 사이드바 등을 만들 때 다음과 같이 CSS의 fixed를 사용하면 편리합니다.
width: 160px; /* Set the width of the sidebar or side tab */
position: fixed; /* Fixed Sidebar or Side Tab (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
right: 0; /* Stay at the right */위와 같은 코드를 사용하면 브라우저의 오른쪽에 해당 요소가 고정됩니다.
콘텐츠 옆에 고정되는 퀵메뉴, 퀵뷰, 소셜바 만들기 (CSS)
퀵메뉴나 어떤 요소를 콘텐츠 바로 옆에 고정되도록 만들고 싶은 경우가 있을 수 있습니다. 그런 경우 다음과 같은 CSS 코드를 활용할 수 있습니다.
right: calc(50% - 화면 가운데로부터 퀵메뉴의 오른쪽 끝부분까지의 너비);그림으로 살펴보며 쉽게 이해할 수 있습니다.
최대 너비값이 되었을 때 안보이게 하려면 미디어쿼리로 display: none으로 처리하면 됩니다.
심플한 예제를 하나 만들어보았습니다. 실제 작동을 다음 jsfiddle에서 확인해볼 수 있습니다.
예제 CSS:
.content {
margin-left: 75px;
font-size: 30px;
max-width: 800px;
width: 100%;
margin:0 auto;
}
.icon-bar {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right:calc(50% - 460px); /* right:calc(50% - social bar width/2) */
}
@media screen and (max-width:920px){
.icon-bar {
display: none;
}
}샘플 jsfiddle 코드는 w3schools.com의 How TO - Sticky Social Bar(고정 소셜바를 만드는 방법)의 코드를 응용한 것입니다.
워드프레스에서도 위와 같은 방법을 그대로 이용할 수 있고, 정교한 기능을 원하는 경우 플러그인을 사용할 수 있습니다.
- Easy Side Tab Pro - Responsive Floating Tab Plugin For Wordpress (워드프레스용 반응형 붙박이 고정 탭 플러그인)
- Smart Sidebars Slider - Plugin for WordPress (스마트 사이드바 슬라이더)
참고: