在Safari中无法实现引人注目的视差滚动效果

Question

我的网站使用了停止滚动视差效果。我使用的代码停止滚动是：

if ( parseInt($("div#bg").css("top"), 10) <= -0 ) {
    $('#content').css('top', (-0) + 'px');
    $('#logo').css('margin-top', (-142) + 'px');
}

这段代码在Chrome、Firefox和Opera中运行良好，但在Safari中则不太行。有没有针对Safari的不同代码？我知道Safari在滚动方面存在一个bug，但我找不到答案。是否有一种解决方法可以让它在Safari中也能正常工作？或者有什么编辑器可以通过我的代码来运行？

- Jordy van Look

Answer 1

首先，您的布局存在问题，因为在Safari上我甚至看不到您的作品库。我确实看到，您的所有库元素都是主div内的独立元素，没有容器，这可能导致非常难以控制的情况。

回到主题。

parseInt($("div#bg").css("top"), 10) 

返回NaN，我认为这可能是你的问题。#bg的顶部值设置为"auto"，所以parseInt()将返回NaN，因为第一个字符（以及所有其他字符:D）是CHAR而不是数字。

该代码在Chrome上工作，因为它的JavaScript引擎有点更加灵活，但实际上它不应该在那里或其他浏览器中工作。

建议： 你看过Skrollr吗？它是一个用于视差效果的开源jquery库。它写得非常好，看起来它确实可以为你解决问题。

http://prinzhorn.github.io/skrollr/

- Edoardoo

---

那帮我搞清了很多问题，谢谢。我试着给bg div一个top，但没有用。我把与bg一起滚动的元素改为与文档一起滚动。if ($(document).scrollTop() >= 0) { $('#content').css('top', (-0) + 'px'); $('#logo').css('margin-top', (-142) + 'px'); }不幸的是，由于每次滚动都会激活这个功能，网站会一直闪烁。你知道有什么方法可以使网站只在关键时刻或以更静态的方式进行检查吗？另外Skrollr看起来很棒，但具有讽刺意味的是，在Safari中无法运行。 - Jordy van Look

我没有看到你的回答... 有很多方法。最好的做法是将问题“原子化”。将其分解为小动作，查看控制台并像我展示的那样找到解决方案。 我不知道还有什么其他解决方案能像skrollr一样好，但肯定谷歌可以成为你的朋友，也许可以搜索“滚动视差JavaScript库”。 - Edoardoo