Question

我使用以下代码使固定的div（“two”）仅在两个绝对定位的div（“one”和“footer”）之间滚动时保持固定。

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

我该如何解决这个问题？有人可以帮忙吗？

DEMO here。

更新（2016年7月21日）：

似乎正在发生的事情是：

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

我需要维护响应式设计，因为我的网站中有其他功能，所以在缩放浏览器窗口时我无法重新加载页面。缩放页面然后在浏览器中刷新它实际上会正确地重置，但重新加载对我来说不是一个选项。

也许是解决这个问题的方法：

有没有办法重置div“2”的最低位置什么时候缩放窗口？
或者实际上更好;也许重置尽可能低的 div“two”的位置非常频繁且自动，或者每当用户在网页上做某事或缩放时浏览器窗口。这是因为我在div中有可折叠的段 “leftside”将使这个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);

在两个绝对div之间划分固定和不固定切换

1 个答案: