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

我使用以下代码使固定div（“两个”）只在两个绝对定位的div（“一个”和“页脚”）之间滚动时保持固定。

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

我怎么解决这个问题？ 有人可以帮忙吗？

这里的DEMO 。

更新（2016年7月21日）：

似乎正在发生的事情是：

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

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

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

1. 当窗口缩放时，有没有办法重置div“2”的最低位置？
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()  (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 。
• 在resize时重置$startPos – 这会修复粘性元素上方的元素问题，从而在resize时更改其高度/位置。
• 将固定元素的top值移动到followTo函数中的参数，并在切换fixed / absolute位置时考虑它，以实现更平滑的过渡。

这是更新的小提琴 。

 $.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);