Test jQuery Extend

index.html

<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>

script.js

var CheckPosition = {
  init: function(el) {
    var _ = this;
    _.el = $(el);
    _.win = $(window);
    
    _.eTop = _.el.offset().top;
    _.eHeight = _.el.outerHeight(true);
    
    _.eBtm = _.el.offset().top + _.el.outerHeight(true);
    
    _.wTop = _.win.scrollTop();
    
    _.wScroll = _.wTop - _.eHeight;
    _.wHeight = _.wTop + _.eHeight + _.win.height();
    
    _.scrolledPlusViewable = _.win.scrollTop() + _.win.height();    
  },
  aboveView: function() { var _ = this;
    return ( _.wTop > _.eBtm );
  },
  belowView: function() {var _ = this;
    return ( _.scrolledPlusViewable < _.eTop );    
  },
  fullView: function() {var _ = this;
    return ((_.eTop >= _.wTop) && (_.eBtm <= _.scrolledPlusViewable)); 
  },
  inview: function() { var _ = this;
    return (_.eTop > _.wScroll && _.eTop < _.scrolledPlusViewable);
  }
};

var checkPos = Object.create(CheckPosition);

$.extend(jQuery.expr[':'], {
  aboveView: function(el) {
      checkPos.init(el);
      return checkPos.aboveView()
  },
  belowView: function(el) {
      checkPos.init(el);
      return checkPos.belowView()
  },
  fullView: function(el) {
      checkPos.init(el);
      return checkPos.fullView()
  },
  inview: function(el) {
      checkPos.init(el);
      return checkPos.inview()
  }
});

var _box1 = $("div.box2");

$(document).on('scroll', function() {
  //$("div.box2:fullView").css("background-color", "orange");

  _box1.css("background-color", "#f90").filter(':inview').css("background-color", "ccc").filter(":fullView").css("background-color", "red");

  if (_box1.is(":inview")) {
    console.log('visible');
  }
  
   if (_box1.is(":aboveView")) {
    console.log('Above View');
  };
  
  if (_box1.is(":belowView")) {
    console.log('Below View');
  };
  
  if (_box1.is(":fullView")) {
    console.log('fullView View');
  };
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

.box1{
  height: 500px;
  background-color: #ccc;
  border-bottom: 1px solid #f90;
}
  .box2{
      height: 200px;
      background-color: #dcc;
  }

Test jQuery Extend.markdown

Test jQuery Extend

A Pen by msrafi on CodePen.

License.