Home > Web Front-end > JS Tutorial > body text

jQuery response to scroll bar event function example

PHPz
Release: 2018-09-30 17:27:24
Original
2173 people have browsed it

This article mainly introduces jQuery's function of responding to scroll bar events, which can realize real-time calculation and response functions for jQuery scroll bar status. It has certain reference value. Friends who are interested in jQuery can refer to this article. Relevant learning recommendations: jQuery Online Video Tutorial

The example in this article describes the function of jQuery responding to scroll bar events. Share it with everyone for your reference, the details are as follows:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
  var lazyheight = 0;
  //获取数据
  function showload() {
    lazyheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
    if ($(document).height() - 100 <= lazyheight) {
      alert("xxx");
    }
  }
  //showload();
  //绑定事件
  $(window).bind("scroll",
  function() {
    //当滚动条滚动时
    showload();
  });
})
</script>
</head>
<body>
<img src="1.jpg"/><br/>
<img src="2.jpg"/><br/>
<img src="3.jpg"/>
</body>
</html>
Copy after login

Related recommendations:

Sharing the difference between jquery and js to realize the select all function

Sharing detailed examples of the use of jQuery.form.js

How to implement modularization in Js

The above is the detailed content of jQuery response to scroll bar event function example. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template