Question

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

之后我搜索了另一种方法来做到这一点，我什么也没发现（也许我真的很难搜索）。所以这就是为什么我在这里问它你们有一个想法，我怎么能相对于它的父div而不是窗口做一个粘性侧边栏？

提前致谢！

编辑：小提琴 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);  
});

检查您的演示小提琴 http://jsfiddle.net/7ahsm/19/ 。

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

Answer 2

固定位置将“固定”相对于视口的元素。您需要做的是使父元素position: relative和相对于父元素固定的子元素应为position: absolute; left: 0。

Answer 3

您正在寻找position: absolute;

此处示例：http://jsfiddle.net/qw63j/

jQuery：如何在父容器中创建粘性侧边栏？

3 个答案: