CODEWITHSUNDEEP
javascriptjqueryscrolltop
Thomas Sebastian
Thomas Sebastian

Reputation: 1612

$(window).scrollTop() is not working in safari

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
            });
        })
    };
}

Upvotes: 3

Views: 12955

Answers (1)

DevDonkey
DevDonkey

Reputation: 4880

try

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

webkit browsers always render window/html scrollTop as zero.

Upvotes: 3

Related Questions