javascript - jQuery:如何在父容器中创建一个粘性侧边栏？

Question

大家好，是否可以在 div 容器中制作一个粘性侧边栏？我尝试使用 position fixed 但使用 fixed 改变了元素相对于窗口的位置。所以我做了一些搜索，看看是否可以相对于父 div 做一个固定的位置，基本上所有的答案是否定的。

之后，我搜索了另一种方法来执行此操作，但一无所获(也许我真的不擅长搜索)。所以这就是为什么我在这里问它，你们知道如何制作一个相对于其父 div 而不是窗口的粘性侧边栏吗？

提前致谢!

编辑: fiddle js fiddle

jQuery(function() { // document ready
        var sideBarTop = $('#sidebar').offset().top; // position top
        var sideBarLeft = $('#sidebar').offset().left //position left
        jQuery(window).scroll(function(){ // scroll event
            var windowTop = $(window).scrollTop(); // returns scroll from top
            if(sideBarTop < windowTop) {
                $('#sidebar').css({position: 'fixed', top: 0, left: sideBarLeft});
            }
            else {
                $('#sidebar').css('position', 'static');
            }
        });

    });

Answer 1

您可以使用 position:absolute 并使用 Jquery 根据父元素的滚动更改 top 属性，如下所示:

jQuery(window).scroll(function(){ 
   var windowTop = $(window).scrollTop()+30; 
   jQuery('#sidebar').css('top',windowTop);  
});

检查您的 Demo Fiddle http://jsfiddle.net/7ahsm/19/ .

在您的示例中几乎与使用 position:fixed 相同，但检查另一个示例: http://jsfiddle.net/3CduR/