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

Question

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

由於頁眉是水平和全角的，因此很容易使用position：fixed進行操作，但是如果我對左面板使用相同的方法，則無法解決。

除了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'});
            }
    });

演示

Answer 1

我認為固定div位置的最佳方法是使用Fixed 。 我個人建議僅使用此屬性，下面是演示的一個很好的示例，說明如何執行此操作： 固定CSS屬性

如果您仍然有疑問，請查看一次，讓我知道

在這里查看演示

Answer 2

我剛剛添加

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

而且似乎可以更好地工作。