<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100px;
background:rgba(0,0,0,0.8);
position: fixed;
left: 0;
top: 0;
text-align: center;
font-size: 25px;
line-height: 100px;
color: #fff;
font-family: "微软雅黑";
}
footer{
width: 100%;
height: 300px;
background:rgba(0,0,0,0.8);
text-align: center;
font-size: 25px;
line-height: 100px;
color: #fff;
font-family: "微软雅黑";
}
.content{
width: 100%;
height: 2500px;
}
.btn{
position: fixed;
left: 60%;
bottom: 5px;
padding: 15px 30px;
border-radius: 10px;
background:green;
color: #fff;
font-size: 25px;
cursor: pointer;
}
</style>
<body>
<header>
scroll 与 按钮的位置
</header>
<div class="content"></div>
<footer> 按钮在footer顶部</footer>
<div class="btn">我在屏幕最舒服的位置</div>
</body>
<script src = "jquery.js"></script>
<script>
$(window).scroll(function(){
var btn = $(".btn");
var scrollTop = $(document).scrollTop(); //滚动条到顶部的距离
var textHeight = $(".content").height() + $("footer").height(); //文档的高度
var pageHeight = $(window).height() //当前页面的高度
var scrollBottom = textHeight - pageHeight - scrollTop; //滚动条到底部的距离
var footerHerght = $("footer").height(); //footer的高度
var value = 100;
console.log(scrollBottom);
if(scrollBottom < footerHerght){
//滚动条到底部的距离 小于 footer高度 按钮放在footer之上
btn.css("bottom", footerHerght - scrollBottom + 5 + ‘px‘ )
}else{
btn.css("bottom", "5px");
}
})
</script>
</html>
时间： 2024-08-05 15:24:55