부트 스트랩에서 부분적으로 붕괴하는 사이드 바를 할 수 있습니까?

Question

스크롤 할 때 부분적으로 붕괴되는 사이드 바가있는 부트 스트랩 페이지를 작성하려고합니다 ... 더 좁은 버전의 자체로 축소해야합니다 (예 : 텍스트 대신 아이콘으로 표시). 스타일)이 붕괴 스크롤에 일어난 다음 요소까지 클릭하여 전체 너비까지 열 수 있습니다.

내가 가진 문제는 와이드 스크린을 위해 사이드 바를 맨 왼쪽 (또는 오른쪽)에 고정시켜야하기 때문에 부트 스트랩을 고려하면서 어떻게이 작업을 수행 할 수 있는지 알아낼 수 없다는 것입니다. 즉, 부스트 섹션의 일부가 아닙니다 ... 반면에 태블릿 뷰의 경우 사이드 바가 하나 이상의 열을 차지할 필요가 있다고 가정합니다 (그렇지 않으면 전체 페이지에서 바디 채우기를 조정해야합니다). 내가 할 수있는 일이지만 시험되고 검증 된 방법이 있기를 바라고 있습니다. 이 기술이 사용 된 것을 본 적이 있지만 그 예를 찾을 수는 없다고 느낍니다. 누구든지 문제를 해결하는 방법 또는 가능한지 여부를 알고 있습니까?

Answer 1

HTML :

<div id="wrapper"> 
    <div id="sidebar"> 
    ..... 
    </div> 
</div> 

JS :

이

$(window).scroll(function() { 
    $("#wrapper").toggleClass("active"); 
}); 

CSS :

#sidebar{ 
    position: fixed; 
    left: 0; 
    width: 200px; 
} 
#wrapper.active #sidebar{ 
    width: 100px; 
} 

이 창 스크롤에 사이드 바의 폭을 전환됩니다. 사이드 스크롤바의 마우스 클릭 이벤트 리스너에 윈도우 스크롤의 기능을 추가 할 수도 있습니다.