javascript - Div 固定和不固定在两个绝对 div 之间切换

Question

我正在使用以下代码制作一个固定的 div(“两个”)，以便仅在两个绝对定位的 div(“一个”和“页脚”)之间滚动时保持固定。

但我有一个问题，当浏览器窗口变小或变大时，页脚与固定 div(“两个”)变得不固定的位置之间的距离会增加或减小，因此固定 div 在页脚之前变得不固定到达它或在页脚通过它之后。

我该如何解决这个问题？谁能帮忙？

DEMO here .

更新(2016 年 7 月 21 日):

看来发生的事情是:

因为 div“leftside”的宽度设置为百分比，当浏览器窗口被拖动得更小时，div“leftside”会变高以适应其内容。这使得 div“two”悬卡在 div“footer”上方，因为 div“two”在页面加载时设置了最低可能的垂直位置。

我需要保持响应式设计，并且由于网站中的其他功能，我无法在缩放浏览器窗口时重新加载页面。缩放页面然后在浏览器中刷新它实际上确实正确地重置了一些东西，但重新加载对我来说不是一个选项。

也许解决这个问题的选项:

1. 有没有办法重置 div "two"的最低可能位置何时缩放窗口？
2. 或者实际上更好；也许重置最低可能div“二”的位置非常频繁和自动，或者每次用户在网页上做某事或缩放浏览器窗口。这是因为我在 div 中有可折叠的部分“左侧”将使这个 div 更高或更低，甚至没有缩放浏览器窗口。

我想这部分代码需要进行适配(？):

$window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

这里是完整的脚本:

var window = this;

$.fn.followTo = function (from, bumper) {
    var $this = this,
        $window = $(window),
        $from = $(from),
        $bumper = $(bumper),
        $startPos = $from.offset().top + $from.height(),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() < $startPos) { 
                $this.css({
                    position: 'absolute',
                    top: $startPos
                });
            } else if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#two').followTo('#one', '#footer');

Answer 1

我做了三处修改:

• pos变量未定义，应为 bumper .
• 重置$startPos调整大小时——这解决了粘性元素上方的元素在调整大小时改变其高度/位置的问题。
• 移动了固定元素的 top followTo 中参数的值功能，并在切换 fixed 时考虑到它/absolute职位以实现更平稳的过渡。

这是更新的 fiddle .

$.fn.followTo = function (from, bumper, fixedOffsetTop) {
    var $this = this,
        $window = $(window),
        $from = $(from),
        $bumper = $(bumper),
        $startPos = $from.offset().top + $from.height(),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() < $startPos - fixedOffsetTop) { 
                $this.css({
                    position: 'absolute',
                    top: $startPos
                });
            } else if ($window.scrollTop() > bumperPos - thisHeight - fixedOffsetTop) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: fixedOffsetTop
                });
            }
        };
    $window.resize(function()
    {
        $startPos = $from.offset().top + $from.height();
        bumperPos = $bumper.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#two').followTo('#one', '#footer', 30);