반응성 끈적 사이드 바, 너비를 업데이트해야합니다.

Question

여기에서 시작되는 반응성 끈적 사이드 바가 있습니다 : http://codepen.io/cmegown/pen/fjqzH. 나는 끈적 거리는 부분을 가지고 있으며 원래 뷰포트 너비의 너비와 관련하여 반응합니다. 그러나 아래로 스크롤 한 다음 뷰포트 크기를 변경하면 세로 막대의 너비가 변경되지 않는다는 것을 알 수 있습니다.

나는 sidebarWidth 변수를 업데이트해야한다는 것을 알고 있지만 정확한 방법/위치는 확실합니다.

도움 주시면 감사하겠습니다.

편집 : 이 프로젝트는 다른 프로젝트에서 남긴 것 같지만 끝내기 위해 돌아 왔습니다. 조금 더 있어도 사용자가 페이지를 아래로 스크롤 한 다음 브라우저를 확장하거나 장치를 회전하면 사이드 바 너비를 업데이트하는 방법을 알아낼 수 없습니다. 내가 그만 둔 JS 패널에 주석 처리 된 코드가있다.

Answer 1

스크롤 기능에 너비 계산을 넣기 만하면됩니다.

$(function() { 
    // cache selectors 
    var wrapper = $('.wrapper'); 
    var sidebar = $('.sidebar'); 

    // get some maths 

    var sidebarTop = sidebar.offset().top; 
    var sidebarOffset = 25; // is .wrapper padding 

    // sticky logic 
    $(window).on('scroll', function() { 
    var windowTop = $(window).scrollTop(); 
    var sidebarWidth = Math.round(wrapper.width() * 0.3); // is .sidebar width 
    if (sidebarTop < (windowTop + sidebarOffset)) { 
     sidebar.css({ 
     position: 'fixed', 
     top: sidebarOffset, 
     width: sidebarWidth 
     }) 
    } else { 
     sidebar.css({ 
     position: 'static', 
     width: '30%' // original CSS value 
     }) 
    } 
    }) 
}) 

스크롤 할 때마다 너비를 계산해야하기 때문에 약간의 오버 헤드가 있습니다. 다른 방법으로는 $(window).resize() 함수에 넣으므로 창 크기를 조정할 때 너비를 알 수 있습니다.