스크롤-팔로우 사이드바, 여러 가지 기법

반응형

오늘 정말 간단한 컨셉입니다 여러분! 페이지를 아래로 스크롤할 때 "팔로우"되는 사이드바입니다. 그것을 하는 데는 여러 가지 방법이 있다. CSS와 자바스크립트(jQuery) 두 가지를 추가 CSS 트릭으로 다룰 것입니다.

데모 다운로드 파일 보기

CSS

이를 처리하는 가장 쉬운 방법은 CSS 고정 위치 지정을 사용하는 것입니다. 사이드바는 #페이지 포장 디브 내에 있으므로 사이드바가 그 안에 설정된 다음 여백으로 제 자리에 밀어 넣으면 됩니다.

#page-wrap { 
    width: 600px; 
    margin: 15px auto; 
    position: relative; 
}

#sidebar { 
    width: 190px; 
    position: fixed; 
    margin-left: 410px; 
}

 

이 방법을 사용하면 페이지를 스크롤할 때 사이드바가 제자리에 그대로 유지됩니다.

jQuery

우리가 자바스크립트를 사용할 경우, window.scroll 이벤트 이후에 사용자가 얼마나 아래로 스크롤했는지 측정할 수 있다. 이 거리가 사이드바의 시작 상단 위치보다 더 먼 경우 사이드바의 상단 여백을 조정하여 가시 범위로 밀어내릴 수 있습니다.

Doug Neiner에 의해 최적화됨:

$(function() {

      var $sidebar   = $("#sidebar"), 
                  $window    = $(window),
                  offset     = $sidebar.offset(),
                  topPadding = 15;

      $window.scroll(function() {
                if ($window.scrollTop() > offset.top) {
                              $sidebar.stop().animate({
                                                marginTop: $window.scrollTop() - offset.top + topPadding
                              });
                } else {
                              $sidebar.stop().animate({
                                                marginTop: 0
                              });
                }
      });

});

 

우리가 얻는 시원한 애니메이션 효과 외에는 특별한 이점이 없는데, 이것은 확실히 그것에 관심을 끌 것이다.

보너스 "reveal" 기법

Tim Van Damme의 Maxvoltar.com 개인 블로그 게시물에는 페이지를 스크롤 다운할 때 재미있는 "알려진" 효과가 있는 특별한 사이드바가 있습니다.

비결은 사이드바 아래쪽으로 당겨지는 탄탄한 배경의 헤더 영역을 사이드바의 맨 위에 배치하는 것입니다. 음의 위쪽 여백을 사용하여 위쪽 위치 값을 조정할 수 있습니다. 그런 다음 알파 투명 화이트 페이드 이미지가 사이드바의 맨 위에 주의 깊게 배치되고 그 위에 z-index`d도 배치됩니다. 따라서 머리글에 가려진 사이드바의 상단이 흰색 페이드의 이미지가 "실현"하는 보기로 미끄러져 내려갑니다.

/* Negative top margin on sidebar pulls up header under title-area */
#sidebar { 
    width: 190px; 
    position: fixed; 
    margin: -135px 0 0 410px; 
}

/* Title area kept above all with z-index */
#title-area { 
    background: white; 
    position: relative; 
    z-index: 3000; 
}

/* white-fade image */
#reveal { 
    position: absolute; 
    right: 0; 
    bottom: -20px; 
}

 

걱정

이러한 기술들 중 어느 것에서도, 우리는 본질적으로 고정된 위치를 다루고 있다. 고정 위치 지정 "실제" 콘텐츠(예: 배경 이미지와 반대)는 약간 위험한 영역입니다. 우리는 고정된 위치가 매우 작은 모니터의 보기 가능한 영역보다 결코 더 높지 않다는 것을 확실히 해야 합니다. 높이가 가시 영역을 초과하면 브라우저 창의 가장자리 너머에 액세스할 수 없는 영역이 완전히 숨겨집니다. 고정되지 않은 위치 요소의 경우 오버행이 스크롤 막대를 트리거하지만 고정 위치 요소는 트리거되지 않습니다.

크로스 브라우저 Hoo-Hah

이“모든”의 브라우저에 협력해야 한다. IE 6과 IE 7에 대해 나는 그들이 행동하도록 하기 위해 일부 추가 CSS에 대해 조건부 의견을 넣었다. 데모에서 원하는 소스를 확인하여 확인하십시오. IE 6의 고정 위치 지정을 위해 참조할 수 있는 좋은 데모입니다(기본적으로 페이지의 추가 외부 줄 바꿈이 있어야 하며 절대 위치 지정을 사용해야 합니다).

무툴

 

스크롤링 사이드바의 MooTools 버전이 있는 케이스에 David Walsh가 들어갑니다.

jQuery 플러그인

또한 저장소에도 동일한 작업을 수행하는 jQuery 플러그인이 있으며, 바닥글을 누르기 전에 중지하는 보너스 쿨 기능이 있습니다.

이 링크는 이제 끊어졌지만, 여기 같은 유형의 작업을 수행하는 jQuery 플러그인에 대한 대대적인 요약이 있습니다.