왼쪽 패널을 스크롤 상단에 붙입니다.

Question

페이지를 아래로 스크롤하면 브라우저 상단에 헤더를 붙였습니다. 페이지가 아래로 스크롤 될 때 왼쪽 패널도 고정해야합니다.

헤더가 가로 및 전체 너비이므로 위치와 함께하기 쉽습니다 : 고정하지만 왼쪽 패널에 동일한 방법을 사용하면 효과가 없습니다.

position:fixed 이외의 방법이 있습니까?

코드는 내가 사업부의 위치를 ​​고정 할 수있는 가장 좋은 방법은 Fixed를 사용하는 것입니다 생각 여기

//Primary filter and left panel hing 
    // Check the initial Poistion of the Sticky Header 
    var stickyHeaderTop = $('.filter-header, .left-panel').offset().top; 

    $(window).scroll(function(){ 
      if($(window).scrollTop() > stickyHeaderTop) { 
        $('.filter-header, .left-panel').css({position: 'fixed', top: '0px'}); 
      } else { 
        $('.filter-header, .left-panel').css({position: 'static', top: '0px'}); 
      } 
    }); 

DEMO

Answer 1

입니다. 나는 개인적에만이 속성을 사용하는 것이 좋습니다, 여기에 데모와 함께 좋은 예입니다 것입니다,이 작업을 수행하는 방법에 대해 : 는 Fixed CSS Property

한번을 참조하시기 바랍니다 당신은 여전히 ​​몇 가지 우려 사항이 있으면 알려 주시기

검토 데모 Here

Answer 2

난 그냥

.left-panel { 
    display: block; 
    z-index: 10; 
} 

를 추가하고 더 나은 그와 함께 작동하는 것 같다.