scrollTop 仅适用于 Firefox答案

【问题标题】：scrollTop only works in FirefoxscrollTop 仅适用于 Firefox
【发布时间】：2014-02-10 20:00:26
【问题描述】：

本质上，我试图通过根据滚动距离为 div 的背景位置设置动画来实现视差效果。这在 Firefox 中完美运行，但基于 webkit 的浏览器似乎无法正常工作。也就是说，所有其他浏览器都没有返回 body 的 scrollTop() 值。我试过'document'，'window'，'body，html'等，但没有其他工作。

这是小提琴：http://jsfiddle.net/7WVc4/

这是 JS：

$(document).ready(function(){
    $('body').scroll(function(){
        var scrolled = $('body').scrollTop();
        scrolled*=-0.4;
        $('#container').css('background-position','0px ' + scrolled + 'px');  
    });
});

还有 HTML：

<div id='container'></div>

还有 CSS：

#container {
    background-image:url('http://subtlepatterns.com/patterns/food.png');
    background-attachment: fixed;
    width:80%;
    margin:auto;
    height:1000px;
}

【问题讨论】：

@Ashley Medway 感谢您的回答 - 它现在可以在 Chrome 中运行，但不能在 Firefox 中运行，也许一些有条件的浏览器可以解决它？
@Drew Baker 在 JSFiddle 中运行良好，但恐怕在 Chrome、Safari 或 Firefox 中无法正常运行。
请直接将 cmets 添加到我的答案中。我用一个链接更新了它，表明它确实可以在野外工作。
你解决了吗？我的回答正确吗？
Fin，你还在做这个吗？你能接受答案吗？

标签： jquery webkit background-image parallax scrolltop

【解决方案1】：

应该这样做：

$(document).ready(function(){
    $(window).scroll(function(){
        var scrolled = $(document).scrollTop();
        scrolled*=-0.4;
        $('#container').css('background-position','0px ' + scrolled + 'px');  
    });
});

这里是一个例子，展示了它是最基本的形式： http://labs.funkhausdesign.com/examples/parallax/basic/index.html

它适用于 Chrome 32+、Firefox 26+ 和 Safari 7+。

【讨论】：

很抱歉。感谢您的链接。它在 Safari 和 Chrome 中运行，但我对 Firefox 没有运气。有什么想法吗？
好的，将 scrollTop 选择器调整为文档，现在它适用于所有 3 个。
非常感谢。现在您的网站确实可以运行，但我正在开发的网站仍然无法使用——我应该分享一个链接吗？
是的，如果可以的话，分享链接。
嗨，这是链接：finmoorhouse.com/experiments。它看起来像 css 文件，'foundations.css' 是罪魁祸首，因为如果你删除右边的 div 开始工作而左边的 div 停止工作，虽然我不知道为什么。截至目前，左侧的 div 仅适用于 Firefox。您对为什么会这样有什么建议吗？

【解决方案2】：

另一种答案。 Fiddle.

$(document).ready(function(){
    $(document).on("scroll", function () {
        var scrolled = $('body').scrollTop();
        scrolled*=-0.4;
        $('#container').css('background-position','0px ' + scrolled + 'px');  
    });
});

【讨论】：

$(document).on('scroll') 是否会在文档中滚动任何内容时触发，例如 DIV 上的溢出？
可能。我会检查一下。