与在指定地点停止的页面底部的固定div有关的问题 [英] Issues with Fixed div on bottom of page that stops at given place
问题描述
我们需要一个位于页面底部的页脚工具栏，并在页面滚动到该区域下方时粘贴到某些区域。
我们使用了以下脚本：
但是在一些页面上有一个问题，
我们发现这个特定问题只出现在少数页面上，当页面有一些内容时如图片，视频或Ajax加载其他内容，在加载网页后填充内容（或填充空间）。
我无法解决
http://www.sandiegopchelp.com/services/cellphone-repair/htc/
http： //www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/
http://www.sandiegopchelp.com/notes-on-the-phablet-世界需要一个 /
它通常在博客文章有更多的评论。
这是什么样子？
http://jsfiddle.net/LukeGT/NxSc3/
$（window）.scroll（function（）{
$（'＃bar'） .css（'position'，'static'）;
console.log（$（'＃bar'）。position（）。top）;
console.log（$（window）.scrollTop ）+ $（window）.height（））;
if（$（window）.scrollTop（）+ $（window）.height （）.top + $（'＃bar'）。height（））{
$（'＃bar'）。css（'position'，'fixed'）;
}
}）;
setTimeout（function（）{
$（'＃extra'）。show（）;
}，1000）;
我通过在1秒后显示几个额外的div来模拟图像的后期加载。我相信问题产生的事实，即页面的高度在条形码的代码后运行，因此它的行为，如果页面较短（没有图像/ ajax等）。
我所做的是在每次滚动页面时将栏放在页面底部的位置，从顶部计算其高度，并比较与滚动高度。如果我们的距离太远，它会将该条定位在页面底部的固定位置，否则会留下。它在Chrome中顺利工作，但我没有在别处测试。
We needed a footer toolbar that stays at the bottom of the page, and sticks to some area when page is scrolled below that area.
We did achieved this using following script:
fixed div on bottom of page that stops in given place
But there is an issue on some page where the footer toolbar just disappears from the page, and then appear again when page is scrolled down further.
We found that this particular issue appears only on few page, when the page has some contents like Images, Video, or Ajax load other content where the content is filled in (or space is being filled) after page has loaded.
I have no clue how to fix this.
Here is the link from live site with problem page.
http://www.sandiegopchelp.com/services/cellphone-repair/htc/
http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/
http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one/
It is usually more visible on blog posts with many comments. May be due to Disqus comments being loaded after the page has loaded completely.
How does this look?
http://jsfiddle.net/LukeGT/NxSc3/
$(window).scroll(function() {
$('#bar').css('position', 'static');
console.log($('#bar').position().top);
console.log($(window).scrollTop() + $(window).height());
if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
$('#bar').css('position', 'fixed');
}
});
setTimeout(function() {
$('#extra').show();
}, 1000);
I simulated the late loading of images by just showing a few extra divs after 1 second. I believe the problem arises from the fact that the height of the page changes after the code for the bar runs, so it's behaving as it should if the page were shorter (without the images/ajax etc).
What I do instead is position the bar in it's place at the bottom of the page each time the page is scrolled, calculate its height from the top there, and compare this with the scroll height. If we're too far up, it positions the bar in a fixed position at the base of the page, and otherwise leaves it alone. It works smoothly in Chrome, but I haven't tested elsewhere.
这篇关于与在指定地点停止的页面底部的固定div有关的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
