交叉浏览器问题与jQuery offset()返回不同的值

时间:2014-07-20 13:37:25

标签: jquery safari offset scrolltop

基本上,我尝试做的是将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');
            }

        });

} 

这在所有浏览器中都能完美运行(无论如何最新版本)除了Safari - 这就是Safari ..没错。它适用于I.E.太!截至本文撰写时,我还没有在平板电脑上进行测试。

问题是Safari为$fixedElementTop返回了不同的值。它大约450px。

由此我确定在我想要应用该类的元素上方的响应元素上缺少高度属性,这很可能是发生这种情况的原因 - 但仅在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%而不是auto,当然,它至少会破坏Safari中的图像渲染,但是会为$fixedElementTop返回正确的值,并且JS函数是预期的。

希望这已经足够了。

不是解决方案,而是一条线索,也许在评论中说了些什么。

更新

所以情节变浓了 - 我有一个非常基本的“允许饼干”。相关页面上使用的例行程序...点击指向“允许Cookie”的链接&#39;只需设置一个cookie并重新加载页面:

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

当在Safari中允许cookie后加载页面时,解决了固定元素问题,直到页面重新加载!我的意思是,那只是疯了!?!?

问。这两个事件如何进行远程连接? Safari bug?否则它必须是Karma踢我的坚果踩蜗牛(意外)!

1 个答案:

答案 0 :(得分:8)

只需使用$(window).load();就可以修复此问题。而不是$(document).ready();执行脚本!