技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
常见的jquery scroll的应用
Link Address:
http://www.6yang.net/myjavascriptlib/scoll/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sroll的应用</title>
<style type="text/css">
body{
padding:0px 0;
margin:0;
font:12px/1.5 Verdana, Geneva, sans-serif;
}
.next{
background:#ccc;
}
.float{
position:fixed;
left:0;
top:0;
z-index:11;
width:100%;
}
.container{
height:1455px;
width:2222px;
}
#writeMsg{
height:50px;
background:#f30;
}
.scollBar{
width:200px;
height:200px;
overflow:hidden;
overflow-y:auto;
}
.scollBar .contentSc{
height:555px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
// for window is footer?
var theNextMarginTop = $(".next").position().top;
$(window).scroll(function(){
var isFoot = ($(window).scrollTop() + $(window).height()) == $(document).height() ? alert("The window is Footer"):'';
var currScrolltop = $(this).scrollTop();
if(currScrolltop > theNextMarginTop ){
$(".next").addClass("float")
}else{
$(".next").removeClass("float");
}
})
//for div is footer?
$(".scollBar").scroll(function(){
var isFoot = ($(this).scrollTop() + $(this).height()) == $(".contentSc").height() ? alert("The div is Footer"):'';
})
$(".next").mouseover(function(e){
var curX = e.pageX;
//alert(curX);
var curX01 = e.clientX;
//alert(curX01 + $(window).scrollLeft());
//alert(e.pageX);
var wHeight = $(window).height();
var wScrollHeight = $(window).scrollTop();
var isFooterHeight = wHeight - wScrollHeight;
//alert(isFooterHeight);
})
});
//]]>
</script>
</head>
<body>
<div class="container">
<div id="writeMsg" class="msg">aaaaaa</div>
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/><div class="next"> fds</div>
<div class="scollBar">
<div class="contentSc">fsfsfs</div>
</div>
</div>
</body>
</html>