您的位置：首页 > Web前端 > JQuery

Jquery页面滚动

2016-03-14 22:42 585 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>



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

<script type="text/javascript">

$(document).ready(function(){

//1 初始化个数

for(var i = 0 ; i< 10 ; i ++){

//1.1 创建一个div

createDiv();

}

//2 给body绑定 scroll 事件，给整个窗体设置滚动事件

$(window).scroll(function(){

// * 距离可滚动值有一个固定值100时，自动添加一个div

//2.1 整体高度 - 可见高度 = 可以允许滚动的高度

var height = $("body").height()- $(this).height(); //

//2.2 显示数据方便调试

$("#showData").html("固定数据：" + $(this).scrollTop() + ", 允许滚动" + height);

//2.3 如果固定到临界值，自动添加画一个div

if($(this).scrollTop() + 100 > height){

createDiv();

}

});

});

var num = 1;

function createDiv(){

//1 创建div

var $divObj = $("<div></div>");

//2设置样式

$divObj.css({

border: "1px solid #000" ,

height: "100px",

width : "500px",

margin: "5px"

});

//3写入内容，用于记录当前div个数

$divObj.html(num);

num++;

//4 添加

$("body").append($divObj);

}

</script>

<style>

#showData{

border: 1px solid #000;

width: 400px;

height: 30px;

position: fixed;

left: 600px;

bottom: 0;

}

</style>

</head>

<body>

<div id="showData"></div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航