stellar.js视差滚动插件中的showElement方法总是在元素一出现在视口就执行，能否改成元素到达视口中央才执行？

Question

这是stellar插件的中文文档，如乱码请将字符编码改成unicode

$().stellar({
  // 自定义元素如何出现和消失
  hideElement: function($elem) { $elem.hide(); },
  showElement: function($elem) { $elem.show(); }
})

stellar.js视差滚动插件中的showElement方法可以在元素出现的那一刻执行用户自定义的函数。
然而，这个方法总是在元素一出现在视口就执行，能否改成元素到达视口中央才执行？

Answer 1

var rect=element.getBoundingClientRect用于获得页面中某个元素相对浏览器视窗的位置
根据你的需求判断rect.top是否在你期望的位置
如果是，就显示;否则继续等待

$().stellar({
  // 自定义元素如何出现和消失
  hideElement: function($elem) { 
    $elem.hide(); 
  },
  showElement: function($elem) { 
    var rect=$elem[0].element.getBoundingClientRect();
    if(rect.top<=你期望的位置){
        $elem.show();
    }
 }
});