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

DEMO

Answer 1

我认为修复div位置的最佳方法是使用Fixed。我个人建议只使用这个属性，这里是演示的好例子，关于如何做到这一点： Fixed CSS Property

如果您仍有疑虑，请查看一次并告诉我

查看演示Here

Answer 2

我刚刚添加了

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

它看起来效果更好。

滚动时将左侧面板粘到顶部

2 个答案: