1

I am creating a html project. In this project I want to add animated.css classes some divs when these divs are shown. I get position div with position() method. But there is a problem. In chrome, position() method runs when div comes to the top of the page. In safari, position() method runs when div comes to the bottom of the page.

Here is the codes

var posServices = $('.services').position();
var posAbout = $('.about').position();
var posTeam = $('.team').position();
var posPort = $('.portfolio').position();

$(window).bind('scroll', function () {
  if ($(window).scrollTop() > posServices.top) {
    $('.services-column').addClass('animated fadeInUp');
  } 
  if ($(window).scrollTop() > posAbout.top) {
    $('.about-slider').addClass('animated slideInLeft');
    $('.about-content').addClass('animated slideInRight');
  }
  if ($(window).scrollTop() > posTeam.top){
    $('.team-column').addClass('animated bounceIn');
  }
  if ($(window).scrollTop() > posPort.top){
    $('.sub-portfolio').addClass('animated swing');
  }
});

To be more descriptive I shared a video on youtube. Please watch and help to solve my problem. Here is the link

Thank you

Muhammed Yusuf Taşkesenligil
  • 131
  • 1
  • 3
  • 12
  • try to use .offset() instead of .position() ... may help http://stackoverflow.com/questions/3202008/jquery-difference-between-position-and-offset – Mohamed-Yousef Dec 26 '15 at 15:16

1 Answers1

0

This really can be the solution, ie. using .offset() instead of .position() According to JQuery API Docs .position() gets the position related to the parent offset element, but the .offset() method gets the position related to the document element. So the solution could be:

var posServices = $('.services').offset(); var posAbout = $('.about').offset(); var posTeam = $('.team').offset(); var posPort = $('.portfolio').offset(); //ETC.

Have lots of fun!

Harmath Bálint
  • 21
  • 8