$(window).scrollTop()在Safari浏览器中无法正常工作。

Question

在Firefox和Chrome上运行良好，但Safari似乎有一些问题。这是代码。

function founders() {
var scrollPos = $(window).scrollTop();
    if (scrollPos == 900) {
        $(function() {
            $(".first_fall").fadeIn(1000);
            $(".second_fall").fadeIn(2000);
            $(".third_fall").fadeIn(3000);
        });
    };
}

这就是我给它起的名字。

$(document).ready(function(e) {
        $(window).bind('scroll', function() {
            founders();
        });
   });

同样的功能在不同页面上在Safari和Chrome上运行良好。以下是代码：

$(function() {
    $(window).bind('scroll', function() {
        zoomed();
    });
}());

function zoomed() {
    var scrollPos = $(window).scrollTop();
        if (scrollPos >= 500 && scrollPos <= 800) {
            $(function() {
               $('#icon_you').animate({
                opacity: 0
            });

            $('.about_head').animate({
                opacity: 1
            });
        });
    } else {
        $(function() {
            $('.about_head').animate({
                opacity: 0
            });
            $('#icon_you').animate({
                opacity: 1
            });
        });
    };
    if (scrollPos >= 1100 && scrollPos <= 1500) {
        $(function() {
            $('.about_company_head').animate({
                opacity: 1
            });
            $('#icon_company').animate({
                opacity: 0
            });
        });
    } else {
        (function() {
            $('.about_company_head').animate({
                opacity: 0
            });
            $('#icon_company').animate({
                opacity: 1
            });
        });
    };
    if (scrollPos >= 1700 && scrollPos <= 2200) {
        $(function() {
            $('.about_project_head').animate({
                opacity: 1
            });
            $('#icon_project').animate({
                opacity: 0
            });
        });
    } else {
        $(function() {
            $('.about_project_head').animate({
                opacity: 0
            });
            $('#icon_project').animate({
                opacity: 1
            });
        });
    };
    if (scrollPos >= 2700 && scrollPos < 3200) {
        $(function() {
            $('.about_practical_head').animate({
                opacity: 1
            });
            $('#icon_practical').animate({
                opacity: 0
            });
        });
    } else {
        $(function() {
            $('.about_practical_head').animate({
                opacity: 0
            });
            $('#icon_practical').animate({
                opacity: 1
            });
        })
    };
}

- Thomas Sebastian

---

使用 $(document).scrollTop() 和 $("html").scrollTop() 会有什么不同吗？ 它们会给出相同的结果吗？ - Sander

$(window).scrollTop()难道不应该比其他方法更兼容各种浏览器吗？无论如何，让我试一下，马上回复你。 - Thomas Sebastian

没错，你猜对了。我正在PC上进行测试，如果这有帮助的话。 - Thomas Sebastian

它返回了0，但令我惊喜的是，在另一页中使用相同的 $(window).scrollTop() 却运行良好。 - Thomas Sebastian

你尝试在你的网站上运行不同版本的jQuery了吗？ - Sander

Answer 1

尝试一下

var scrollPos = $("body").scrollTop();

Webkit浏览器总是将窗口/HTML的scrollTop渲染为零。

- DevDonkey

---

这并没有解决问题。但它在 Chrome 中运行良好。抱歉我之前打错了一个字母。但它仅在 Chrome 中运行。 - Thomas Sebastian