跨浏览器问题，jQuery offset()top返回不同的值 [英] Cross Browser issue with jQuery offset()top returning different values
问题描述
基本上，我想做的是将CSS类应用于文档滚动位置的上下文中的元素.
具体来说，由于添加了css类，允许我的侧边栏导航与其他内容一起滚动到视口顶部下方20px，这时元素变为固定位置，这要归功于CSS类，直到文档随后在删除该类之后，该元素又向上滚动到该点的上方，并且该元素再次与页面的其余内容一起滚动.
我需要解决方案尽可能轻巧，并且不希望使用已经存在的jQuery以外的任何库.它应该与响应式布局一起使用，并且应与跨浏览器兼容-包括IOS和Andriod平板电脑.
这是我到目前为止拥有的JS，以$(document).ready()函数执行:
// fixed element target
var $fixedElement = $("#fixIt");
// if the element exists
if ($($fixedElement).length > 0) {
var $fixedElementTop = $fixedElement.offset().top -20;
$(window).scroll(function(){
// add .fixed else remove class
if ($(this).scrollTop() > $fixedElementTop) {
$('#fixIt').addClass('fixed');
}else{
$('#fixIt').removeClass('fixed');
}
});
}
这在所有浏览器(无论如何都是最新版本)中都可以完美运行. EXCEPT Safari -那是Safari.也！截至撰写本文时，我尚未在平板电脑上进行过测试.
问题是Safari为$fixedElementTop返回了一个不同的值.大约有450像素.
由此，我确定了响应元素上方没有高度属性，这是我想将类应用于其上的元素的最可能原因，但仅在Safari中. /p>
我认为jQuery提供了解决此类问题的解决方案，但我一生无法解决.我已经在该网站上阅读了10篇或更多文章，并且从其他地方在线阅读了更多文章，似乎没有任何解决办法.
注意:该函数必须以动态方式工作-我不能简单地考虑要添加类并对其进行计算的元素上方的所有元素.例如，因为这些详细信息将逐页更改.
这就是为什么我没有在问题中包含任何HTML或CSS的原因-正确的解决方案应该可以使用我认为的任何兼容标记来工作.
有什么想法吗?预先感谢.
编辑
根据请求的HTML/CSS(很抱歉；)
HTML
<div id="billboard-wrap">
<div class="container">
<div class="sixteen columns">
<div id="billboard-img">
<img src="images/billboard-placeholder.png" alt="" class="scale-with-grid" />
</div>
</div>
</div>
</div>
CSS
#billboard-wrap{
padding:20px 0;
line-height:0;
}
#billboard-img{
padding:10px;
background-color:#626262;
}
img.scale-with-grid {
max-width: 100%;
height: auto;
}
注意::刚注意到高度:自动；在scale-with-grid类上..嗯?猜猜可能是吗?如果我将其更改为100％(而非自动)，则可以确定，它至少会使Safari中的图像显示混乱，但是$fixedElementTop会返回正确的值，并且JS功能符合预期.
希望这已经足够.
不是解决方案，而是线索和评论中所讲内容的证实.
更新
所以情节变厚了-我在相关页面上使用了一个非常基本的'allow cookies'例程...单击'allow cookies'的链接只是设置一个cookie并重新加载页面:
document.location.href = $(this).attr('rel');
在Safari中，在允许cookie后加载页面时，固定元素问题得以解决，直到重新加载页面为止！我的意思是，那真是疯了！?！?
问.如何甚至可以远程连接这两个事件? Safari错误?否则，一定是因果报应(Karma)将我踢到要踩蜗牛的螺母上(偶然)！
此问题已通过使用$(window).load();得以解决.而不是$(document).ready();执行脚本！
Essentially, what I'm trying to do, is apply a CSS class to an element in context to the scroll position of the document.
Specifically, allowing my sidebar navigation to scroll to 20px below the top of the view port along with the rest of the content, at which point the element becomes of fixed position, thanks to the css class added, until the document is subsequently scrolled back up above that point, when the class is removed and the element again scrolls with the rest of the page content.
I need the solution to be as light weight as possible and do not wish to use any library other than jQuery, which is is already in place. It should work with responsive layouts and be cross-browser compatible - including IOS and Andriod tablets.
Here's the JS I have so far, executed as $(document).ready() function:
// fixed element target
var $fixedElement = $("#fixIt");
// if the element exists
if ($($fixedElement).length > 0) {
var $fixedElementTop = $fixedElement.offset().top -20;
$(window).scroll(function(){
// add .fixed else remove class
if ($(this).scrollTop() > $fixedElementTop) {
$('#fixIt').addClass('fixed');
}else{
$('#fixIt').removeClass('fixed');
}
});
}
This works perfectly in all browsers (latest versions anyway) EXCEPT Safari - That's Safari.. no mistake.. it works in I.E. too! I have not tested on tablets as of this writing.
The issue is that Safari returns a different value for $fixedElementTop. It's out by around 450px.
From this I established that the lack of height attributes on responsive elements above the element that I want to apply the class to, is most likely the reason why this happens - but only in Safari.
I figure that jQuery provides a solution to such issues but can't for the life of me work out how. I've read 10 or more articles on this site, and more from elsewhere online and nothing seems to solve this.
Note: The function must work in a dynamic fashion - I can't simply take account of all of the elements above the the element that I want to add the class to and make calculations on that basis, for example, because these particulars will change from page to page.
This is why I have not included any HTML or CSS with the question - the correct solution should work using any compliant markup i think.
Any ideas? Thanks in advance.
EDIT
As per requested HTML / CSS (sorry about that ;)
HTML
<div id="billboard-wrap">
<div class="container">
<div class="sixteen columns">
<div id="billboard-img">
<img src="images/billboard-placeholder.png" alt="" class="scale-with-grid" />
</div>
</div>
</div>
</div>
CSS
#billboard-wrap{
padding:20px 0;
line-height:0;
}
#billboard-img{
padding:10px;
background-color:#626262;
}
img.scale-with-grid {
max-width: 100%;
height: auto;
}
NOTE: Just noticed the height:auto; on the scale-with-grid class.. hmm? Guess that could be it? If I change to 100% instead of auto, sure, it messes up image rendering in Safari at least, but the correct value is then returned for $fixedElementTop and JS function is as expected.
Hope this is sufficient.
Not the solution, but a clue, and conformation of what's been said in the comments perhaps.
UPDATE
So the plot thickens - I have a very basic 'allow cookies' routine in use on the related page... Clicking the link to 'allow cookies' simply sets a cookie and reloads the page:
document.location.href = $(this).attr('rel');
When in Safari the page loads after allowing cookies, the fixed element issue is resolved, until the page is reloaded! I mean, that's just nuts!?!?
Q. How can the two events be even remotely connected? Safari bug? Otherwise it must be Karma kicking me in the nuts for treading on a snail (by accident)!
This issue was fixed by simply using $(window).load(); instead of $(document).ready(); to execute the script!
这篇关于跨浏览器问题，jQuery offset()top返回不同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
