我一直在处理问题,我的计算似乎在某些地方出现了偏差,但对于我来说,我无法弄清楚在哪里。
基本上,我想要做的是将一个元素固定到另一个元素的内部。因此,在滚动时,固定元素将驻留在用户视口(viewport)的底部,直到它到达其父容器的末尾。
我知道有 jQuery Pin插件在那里...但我想自己构建它,以便我可以集成到另一个插件中 — 还有学习目的。
下面是我的基本计算,有一个 fiddle 可以让我看到它更符合我想要完成的事情。
var $win = $(window);
$win.on('scroll', function(e) {
var $base = $('.base'),
$inner = $('.inner'),
baseoffset = $base.offset().top,
viewportHeight = $win.height(),
innerBoundingBox = $base[0].getBoundingClientRect().top,
innerPOS = innerBoundingBox + viewportHeight;
if(innerPOS < 0) {
$inner.css('bottom', 0);
}
else {
$inner.css('bottom', innerPOS);
}
});
jsFiddle: http://jsfiddle.net/listao/Acb6R/
更新:jsFiddle 链接已更新为最新版本。
最佳答案
好吧,您计算了盒子的顶部,但没有计算底部。这是一个解决方案:
var $win = $(window),
$base = $('.base'),
$inner = $('.inner');
$win.on('scroll', function(e) {
var viewportHeight = $win.height(),
baseBoundingBox = $base[0].getBoundingClientRect().top,
innerPOS = (baseBoundingBox + $base.outerHeight()) - viewportHeight,
baseWidth = $base.outerWidth();
if(innerPOS <= 0) {
if ($inner.css('position') !== 'absolute') {
$inner.css({ position: 'absolute', maxWidth: 'none', left: 0, marginLeft: 0 });
}
}
else {
if ($inner.css('position') !== 'fixed') {
$inner.css({ position: 'fixed', maxWidth: baseWidth, left: '50%', marginLeft: -(baseWidth / 2) });
}
}
});
我正在更改位置
、宽度和居中信息。有点麻烦,但由于 .inner
是 .base
的子项(即 position: relative
),我想不出一个更好的方法。
这是 fiddle 更新:http://jsfiddle.net/rodgolpe/Acb6R/7/
关于javascript - 通过 JavaScript 将元素固定到另一个元素的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24335610/