我想知道当 div 滚动到 View 之外时如何将其固定在窗口底部。我知道你可以使用 twitter bootstrap 来做到这一点,但我不想使用库。
到目前为止,我有一些我认为可以工作的 jQuery:
$(window).scroll(function() {
if (((($('.show_postQuestion').offset().top +
$('.show_postQuestion').height()) -
($(window).scrollTop()+$(window).height())) > 0)) {
// Post form off-screen
$('.show_postQuestion').addClass('fixed');
} else {
$('.show_postQuestion').removeClass('fixed');
}
});
.fixed 类只是 position:fixed;底部:0;
。
这样做的问题是,如果表单滚动并自行修复,它就不再处于 View 之外,并且文本滚动将自行取消修复,导致它再次自行修复,等等等等,使其成为现实闪烁。
我想知道是否有人对如何解决此问题或替代解决方案有建议?
谢谢!
最佳答案
如果我正确理解您的问题,您希望将一个元素固定在窗口底部(如果它通常位于页面下方并且不在 View 中)。当用户向下滚动到自然位置时,它会像平常一样随着滚动而流动。
我稍微修改了您的函数以记住页面加载时元素的初始位置,并使用它每次将其与滚动顶部位置进行比较。
$(function() {
var $postQ = $(".show_postQuestion"),
$postQPos = $postQ.offset().top + $postQ.height(),
$win = $(window);
$win.scroll(function() {
if ($postQPos > $win.scrollTop() + $win.height()) {
// Post form off-screen
$('.show_postQuestion').addClass('fixed');
} else {
$('.show_postQuestion').removeClass('fixed');
}
}).trigger('scroll'); // trigger the event so it moves into position on page load
});
关于javascript - 将 div 附加到窗口底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15197453/