Detailed explanation of jquery plug-in jquery.viewport.js

This article mainly introduces the detailed explanation of how to learn and use the jquery plug-in jquery.viewport.js. It has certain reference value. If you are interested, you can learn more

Introduction

Viewport is a simple jQuery plugin that adds custom pseudo-selectors and handlers to elements for simple element detection inside and outside the viewport.

Usage method

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

Method

$( ":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" );

Example

The return button is displayed after the yellow part leaves the screen

##

  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();

Summary

By using this plug-in, you can easily and conveniently obtain the area of ​​the screen and the area outside the screen area for development.

Related recommendations:

Viewport for screen adaptation in html5 development

Share viewport attributes to solve vertical screen switching on mobile terminals Example of the problem of horizontal screen font being reset

Introduction to the parameters of Viewport in HTML5 and how to use it

The above is the detailed content of Detailed explanation of jquery plug-in jquery.viewport.js. For more information, please follow other related articles on the PHP Chinese website!