3

It works fine on firefox and chrome,but safari seem to have some issue.Here is the code.

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

And this is how I have called it

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

The very same function works well on safari and chrome on a different page.Here is the code

$(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
  • 1,582
  • 5
  • 18
  • 38
  • What version of Safari are you using? – Sander Aug 01 '14 at 07:35
  • Thanks for the reply Sander.I use version 5.1.7 – Thomas Sebastian Aug 01 '14 at 07:37
  • Will it make any difference if you use $(document).scrollTop() or does it give you the same result? Or maybe even $("html").scrollTop()? – Sander Aug 01 '14 at 07:41
  • Isn't the $(window).scrollTop() supposed to be more browser campatible than the others?Anyway let me try and get back to you in a moment. – Thomas Sebastian Aug 01 '14 at 07:44
  • Hey Sander,I tried both with no luck. $(""html).scrollTop() even broke chrome support and hence I reverted back to $(window).scrollTop() itself. – Thomas Sebastian Aug 01 '14 at 07:49
  • Ofcourse, I assume that you are using the desktop version of Safari and not Mobile Safari? – Sander Aug 01 '14 at 07:51
  • Yes, you guessed it right.And I am testing it on a PC,if that helps. – Thomas Sebastian Aug 01 '14 at 07:51
  • Please try and use the Web Inspector tool in Safari to evaluate what is returned when running $(window).scrollTop() – Sander Aug 01 '14 at 07:54
  • It returned me 0,but to my amusement the same $(window).scrollTop() used in another page is working fine. – Thomas Sebastian Aug 01 '14 at 08:04
  • Have you tried running a different version of jQuery on your site? – Sander Aug 01 '14 at 08:05
  • I have two jQuery files there.One the latest 1.11.1 version and another for jQuery knobs.All my other files are in a separate JS file which doesn't return any error and everything else is working fine too. – Thomas Sebastian Aug 01 '14 at 08:11
  • It seems this problem solved earlier: http://stackoverflow.com/questions/1830080/jquery-scrolltop-doesnt-seem-to-work-in-safari-or-chrome-windows –  Aug 01 '14 at 08:33
  • Yeah.The answer there with most number of upvotes says that using $("body") should fix the issue and same was prescribed by Matt below.But in my case it is not working.Please not that this is just for safari.It works like a charm in chrome.I guess if the jQuery latest version has something to do here.Anyway I'll keep trying.If anything works out.I shall post back here. – Thomas Sebastian Aug 01 '14 at 09:02

1 Answers1

3

try

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

webkit browsers always render window/html scrollTop as zero.

DevDonkey
  • 4,835
  • 2
  • 27
  • 41