1

現在、要素がビューポートに入るかどうかを調べるために getBoundingClientRect() を使用しています。私が本当にする必要があるのは、要素の 50% (または任意のパーセンテージ) がビューポートに入ったかどうかを確認することです (スクロールを確認しています)。表示されている場合は、ページ上のテキストを更新して「はい」と表示し、表示されていない場合はテキストに「いいえ」と表示します。

ロジックに頭を悩ませているように見えず、頭がおかしくなり始めています。誰か助けてもらえますか?

以下の現在のコード！

isBannerInView: function (el, y) {
  var _this = this,
    elemTop,
    elemBottom,
    elemHeight,
    isVisible;

  for (var i = 0; i < el.length; i++) {
    var pos = banners.indexOf(el[i]);

    elemTop = el[i].getBoundingClientRect().top;
    elemBottom = el[i].getBoundingClientRect().bottom;
    elemHeight = el[i].getBoundingClientRect().height;

    isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);

    _this.updateResults(el[i], pos, isVisible);
  };
},

updateResults: function (el, pos, isVisible) {
  var isInView = isVisible ? 'Yes' : 'No';

  document.querySelectorAll('.results')[0].getElementsByTagName('span')[pos].innerHTML = isInView;
},
4

1 に答える 1

3

jsBin デモ

/**
 * inViewport jQuery plugin by Roko C.B. stackoverflow.com/questions/24768795/
 *
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 * The max returned value is the element height + borders)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : (b<H?b:H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));



$("#banner").inViewport(function( px ){
  var h = $(this).height();
  var isHalfVisible =  px >= h/2;
  $(this).css({background: isHalfVisible?"green":"red"});
});

#banner{
  height:600px;
  background:red;
  margin:1500px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">I'll turn GREEN when I'm more than 50% in viewport</div>

したがって、プラグインはhttps://stackoverflow.com/a/26831113/383904
から取得されます PS: イベントをリッスンするscrollのは非常にコストがかかるため、コードにイベントのスロットル/デバウンス遅延メソッドを追加することをお勧めします。

于 2015-11-30T18:52:10.293 に答える