頁面滾動到底部,懸浮條固定到頁面底部。
阿新 • • 發佈:2018-12-23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0; }
body{height: 2800px;}
p{
height: 2700px;
background: #d4d4d4;
}
.qq{
width: 100%;
height: 50px;
}
.qq1{
position:fixed;
bottom:0;
width: 100%;
height: 50px;
background: red;
}
.qq2{
height : 50px;
background: #309BDF;
}
</style>
<script type="text/javascript" src="../../js/jquery.min.js" ></script>
</head>
<body>
<p></p>
<div class="qq">
<div class="qq1"></div>
</div>
<div class="qq2"></div>
</body>
<script>
$(document).ready(function() {
$(window).scroll(function() {
/*
* $(document).scrollTop() 滾動條距離頂部的距離
* $(document).height() 文件的高度
*
* $(window).height() 螢幕的高度
* $(".qq2").height() 底部版權的高度
*
* if(滾動條距離頂部的距離 >= 文件的高度 - 螢幕的高度 - 底部版權的高度)
*
*/
if ($(document).scrollTop() >= $(document).height() - $(window).height() - $(".qq2").height()) {
$(".qq1").css("position","relative");
}else{
$(".qq1").css("position","fixed");
}
});
});
</script>
</html>