將左側面板粘貼到滾動頂部

Question

當頁面向下滾動時，我已經將標題粘貼到瀏覽器頂部。當頁面向下滾動時，我需要將左側面板凍結。

由於標題爲水平寬度和全寬度，因此可以很容易地使用位置：固定，但如果我使用相同的方法來顯示左側面板，則不能正常工作。

除position: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

我想修復DIV位置的最佳方法是使用Fixed。我個人建議只使用該屬性，這裏是演示的好例子，對於如何做到這一點： Fixed CSS Property

請查看一次，讓我知道，如果你仍然有一些顧慮

審查演示Here

Answer 2

我只是說

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

，似乎工作，更好。