Jquery position() 方法在 chrome 和 safari 中获取不同的值答案

【问题标题】：Jquery position() method get different value in chrome and safariJquery position() 方法在 chrome 和 safari 中获取不同的值
【发布时间】：2015-12-26 15:12:34
【问题描述】：

我正在创建一个 html 项目。在这个项目中，我想在显示这些 div 时添加一些 div 的 animated.css 类。我使用 position() 方法获得位置 div。但有一个问题。在 chrome 中，position() 方法在 div 到达页面顶部时运行。在 safari 中，position() 方法在 div 到达页面底部时运行。

这是代码

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

为了更具描述性，我在 youtube 上分享了一个视频。请观看并帮助解决我的问题。 Here is the link

谢谢

【问题讨论】：

尝试使用 .offset() 而不是 .position() ...可能会有所帮助 stackoverflow.com/questions/3202008/…

标签： jquery html google-chrome safari position

【解决方案1】：

这确实可以成为解决方案，即。使用 .offset() 而不是 .position() 根据JQuery API Docs .position() 获取与父偏移元素相关的位置，但 .offset() 方法获取与文档元素相关的位置。所以解决方案可能是：

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

玩得开心！

【讨论】：