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

【问题标题】：jQuery: How to create a sticky sidebar within a parent container?jQuery：如何在父容器中创建粘性侧边栏？
【发布时间】：2014-02-03 22:20:34
【问题描述】：

大家好，是否可以在 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');
            }
        });

    });

【问题讨论】：

你有你目前拥有的小提琴或示例代码吗？
给父元素位置相对对我有用，您只需要通过边距而不是通过左、上、下、右来定位固定元素
@justin 添加了小提琴
@LJ_1102 问题是我的宽度使用百分比
您也可以使用带百分比的边距，我看不出有什么问题。

标签： javascript jquery html css

【解决方案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/

【讨论】：

@user3261212 np mate 很高兴为您提供帮助

【解决方案2】：

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

【讨论】：

【解决方案3】：

您正在寻找position: absolute;

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

【讨论】：