jQuery offset（）top返回不同值时出现跨浏览器问题

本质上，我要做的是将CSS类应用于上下文中的元素，并将其应用于文档的滚动位置

具体地说，允许我的侧栏导航滚动到视图端口顶部下方20px的位置，以及其他内容，在这一点上，由于添加了css类，元素成为固定位置，直到文档随后滚动到该点上方，当类被移除并且元素再次与页面内容的其余部分一起滚动时

我需要尽可能轻量级的解决方案，并且不希望使用jQuery以外的任何库，jQuery已经存在。它应该与响应性布局配合使用，并与跨浏览器兼容，包括IOS和安卓平板电脑

以下是我到目前为止执行的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');
            }

        });

} 

这在除Safari之外的所有浏览器（无论如何都是最新版本）中都能完美运行。。没错。。它也适用于E.E！截至撰写本文时，我还没有在平板电脑上进行测试

问题是Safari为

$fixedlementtop

返回了不同的值。大约450像素

由此我确定，在我想要应用类的元素之上的响应元素上缺少高度属性，这很可能是发生这种情况的原因，但是仅在Safari中发生

我认为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>

注意：刚刚注意到高度：自动；在

上用网格缩放
类。。隐马尔可夫模型？我猜可能是这样吧？如果我改为100%而不是自动，当然，它至少会弄乱Safari中的图像渲染，但随后会为
$fixedlementtop
返回正确的值，JS函数也如预期的那样

希望这足够了

不是解决方案，而是一条线索，也许是评论中所说内容的构象

更新

所以情节变厚了-我在相关页面上使用了一个非常基本的“允许cookies”例程。。。单击“允许cookie”链接只需设置cookie并重新加载页面：

document.location.href = $(this).attr('rel');

在Safari中，允许Cookie后加载页面时，解决了固定元素问题，直到页面重新加载！我是说，这简直是胡说八道

Q.这两个事件如何能够远程连接？狩猎虫？否则这一定是因果报应，因为我踩了一只蜗牛（偶然）
 只需使用$（window.load（），即可解决此问题；而不是$（document.ready（）；执行脚本
 创建一个简单的演示，其中包含足够的css来复制问题，您将获得更好的响应。您的问题完全有可能与css属性有关，只需要在css中进行一个小的更改或省略，通过添加属性或规则来弥补”--这就是为什么我没有包括任何HTML或css，我认为正确的解决方案应该使用任何合规的标记。-“确实应该，除了关于“跨浏览器解决方案”的几十亿页之外。它可能是一个奇怪的折叠0height元素，safari不计算在内。或者，如果450px仅代表总高度的一小部分，那么它可能只是一个盒子模型。建议：如果您需要一些免费帮助，请发布一些代码，特别是当您有很多需求时。很可能你的解决方案是CSS，而不是JQ。谢谢-我会这样做的，以防万一。我确实说过，我已经计算出前面元素中缺少高度属性被认为是罪魁祸首-如果我添加高度属性，返回的
$fixedlementtop
值会相应增加。因此有一个css解决方案，它不适合此应用程序，需要应用于所有断点和所有布局偏差。：/不过，你可能是对的。。。到目前为止，这只是我的想法。非常甜蜜。只是想澄清一下：我并不是说“高度”是一个特定的属性，而是一个safari无法捕捉的自然属性。我100%同意指定属性是一个糟糕的方法。只是一个简单的建议。Safari是Mac操作系统吗？如果是这样的话，它可能与不断加速的滚动有关：（继续阅读关于Mac实现的文章）。thanx你救了我的a***Safari，新的IE6
document.location.href = $(this).attr('rel');