如何检查元素是否在视口中一次

Question

I'm trying to check if element was seen in viewport once, if seen do nothing, if not continue the function.

.isInViewport() - check if the element is in viewport, returns true or false.

var index - index if seen once, if seen once it will be equal to 1 if not seen once be equal to 0.

$.fn.isInViewport = function (){
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};
  //Get Scale
  var index = 0;
  window.onscroll = function(e) {
    if($('footer').isInViewport()){
      index++;
    }
    if(index == 0){
        if(this.oldScroll > this.scrollY){
          // Do nothing while scrolling up
        }
        else{
          scale = scale + 0.01; // Increase while scroll down
        }
        this.oldScroll = this.scrollY;
    }
  }

Currently, the user reaches to footer tag, the index is 1. But when scrolling back the index is 0 back.

How can I check if viewport was seen once?

Answer 1

I figured out, once isInViewport is false, the window.onscroll event will refresh and remove the index.

So I have added class to the element, so no matter if the element is in viewport, I will still have index if seen or not.

  var index = 0;
  window.onscroll = function(e) {
    if($('footer').isInViewport()){
      $('footer').addClass('viewport');
    }
    if($('footer').hasClass('viewport')){
      index++;
    }
    if(index == 0){
        if(this.oldScroll > this.scrollY){
          // Do nothing while scrolling up
        }
        else{
          scale = scale + 0.005; // Increase while scroll down
        }
        this.oldScroll = this.scrollY;
    }
    console.log(index);
  }