jquery 플러그 인 jquery.viewport.js 학습 사용 방법

소개 하 다.
Viewport 는 보기 창 안팎 에서 간단 한 요소 검 사 를 할 수 있 도록 사용자 정의 의사 선택 기와 처리 프로그램 을 추가 하 는 간단 한 jQuery 플러그 인 입 니 다.
사용 방법

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>

방법.

$( ":in-viewport" );
$( ":above-the-viewport" );
$( ":below-the-viewport" );
$( ":left-of-viewport" );
$( ":right-of-viewport" );
$( ":partly-above-the-viewport" );
$( ":partly-below-the-viewport" );
$( ":partly-left-of-viewport" );
$( ":partly-right-of-viewport" );
$( ":have-scroll" );

실례
노란색 부분 이 화면 을 벗 어 나 면 되 돌아 오 는 단추 가 표 시 됩 니 다.

  var wodBackButton = function () {
    //             
    $("#wodsHome:left-of-screen").each(function () {
      $('#wodBackButton').removeClass('hide');
      return;
    });
    //               
    $("#wodsHome:in-viewport").each(function () {
      $('#wodBackButton').addClass('hide');
      return;
    });
  }

  $('#mediaContainer').bind("scroll", function (event) {
    wodBackButton();
  });

  wodBackButton();

총결산
이 플러그 인 을 사용 하면 화면의 영역,화면 이외 의 영역 을 쉽게 가 져 와 개발 할 수 있 습 니 다.
github 주소
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.