Jquery页面滚动

最新推荐文章于 2024-04-23 11:28:13 发布

小小烨

最新推荐文章于 2024-04-23 11:28:13 发布

阅读量298

点赞数

本文链接：https://blog.csdn.net/hujingye/article/details/50890645

版权

<!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>

小小烨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery页面滚动

Insert title here$(document).ready(function(){//1 初始化个数for(var i = 0 ; i//1.1 创建一个divcreateDiv();}//2 给body绑定 scroll 事件，给整个窗体设置滚动事件$(window).scroll(function(){// * 距离可滚
复制链接

扫一扫