位置固定的相关父容器

Question

我需要解决方案来模拟固定位置，但是需要相对父div，而不是整个视口。 JS解决方案是滞后的。 我需要固定的相关父容器，因为如果窗口的高度较小，则具有固定位置的div会进入页脚区域。

例

Answer 1

另一种方法是更新。

尝试给出固定的div z-index: 10;

和页脚div position: relative; z-index: 11 position: relative; z-index: 11

这应该使页脚重叠固定div。

Answer 2

然后它不是位置问题：修复，也许你可以定义一个最小高度到你的身体（或主要包装，如果有的话），以避免短页问题

Answer 3

我结合了css和js：

$(document).ready(function () {
                var $sidebar = $(".register-box"),
                $window = $(window),
                $content = $("#content"),
                docHeight = $(document).height();
                var entered = false;

                $window.scroll(function () {
                    if ($window.height() < 795 && docHeight - $window.scrollTop() < 785) {
                        entered = true;
                        var pos = $sidebar.offset();
                        $sidebar.css('position', 'absolute').css('top', ($content.height() - ($sidebar.height() + 40)) + 'px');
                    }
                    else {
                        if (entered) {
                            entered = false;
                            $sidebar.css({
                                top: "",
                                left: "",
                                position: "fixed"
                            });
                        }
                    }
                });
            });

代码不是最终的，并且数字是硬编码的，但是可以正常运行。