scroll与按钮的位置
2024-08-29 09:28:42
<!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>
最新文章
- PNG类库
- Go-Agent原理分析及FQ介绍
- Java网络编程(UDP协议-聊天程序)
- SGU 114.Telecasting station
- SQL中的case when then else end用法
- MVC使用Exception过滤器自定义处理Action的的异常
- SQL 查找某个字段的首字母
- EGit with eclipse to clone project from GitHub(Step by step)
- C# -- 把json字符串转为对象并读取各属性的值
- Codeforces Round #235 (Div. 2) D. Roman and Numbers(如压力dp)
- webrtc如何进行错误恢复
- c++ <;stdarg.h>; 解决变参问题的宏定义;
- VS2013 C#中调用DLL
- day20 二十、加密模块、操作配置文件、操作shell命令、xml模块
- django Admin文档生成器
- Java+Windows+ffmpeg实现视频转换
- 关于ios7的适配问题
- 一,PHP会话机制---cookie
- es-多文档简单查询(_mget)
- 定时器Quartz ClassNotFound org.springframework.scheduling.quartz.SchedulerFactoryBean