scroll与按钮的位置
<!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>
scroll与按钮的位置的更多相关文章
- scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置
scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...
- 使用RelativeLayout控制WebView以及Bottom按钮的位置
使用RelativeLayout控制WebView以及Bottom按钮的位置 (地址) 在Design View中加入控件RelativeLayout, WebView, LinearLayout(H ...
- jQuery实现两个按钮的位置互换
页面上有2个按钮A和B.点击按钮A和按钮B互换位置 ,点击按钮B和按钮A互换位置.应该如何实现? html代码如下: <body> <!--页面上有2个按钮A和B. 点击按钮A和按钮 ...
- 微信小程序:scroll滑到指定位置
概述 这是我开发微信小程序遇到的坑中的一个,专门记录下来,供以后开发时参考,相信对其他人也有用. scroll滑到指定位置,有两种解决方案,一种是用scroll-view标签,另一种是用wx.page ...
- iOS开发项目之四 [ 调整自定义tabbar的位置与加号按钮的位置]
自定义tabbar与按钮的添加 01 - 把系统的tabbar用我们自己的覆盖 LHQTabBar *lhqTabBar = [[LHQTabBar alloc]init]; [self setVal ...
- VB6之调整任务栏按钮的位置
好无聊,睡前一更~ XP的任务栏没办法像win7那样随意拖动交换顺序,偶觉不爽,遂写程序搞之.这个不算什么新东西,参考了很多别人写的东东. 程序启动后,会在右下角托盘区显示钢铁侠的图标.右键击之,可选 ...
- 使用flex布局调换两个按钮的位置
组件用的时antd的Modal组件,里面的按钮需要调换一下位置 今天发现用flex布局非常方便,代码如下: display: flex; justify-content: center; flex-f ...
- 如何调换antd中Modal对话框确认按钮和取消按钮两个按钮的位置
今天有个工作是把所有的确认按钮放在取消按钮的左边,类似于下图这样的,公司用的时antd组件 但是antd组件的按钮时确认键放在右边的 可以采用下面的方式,将按钮调换过来: 对的,就是在modal里面的 ...
- Extjs的完成按钮和位置
this.toolbar.add('->') ---重点是这个箭头,他是控制位置的 this.CompleteDataAction = new Ext.Action({ text : '完成', ...
随机推荐
- 01_2Java开发环境的下载 安装 配置
01_2Java开发环境的下载 安装 配置 l 配置Java开发环境步骤(WindowsXP) l 下载并按照最新版本的J2SDK l 设置Windows环境变量 l 选择合适的文本编辑器或使用集成开 ...
- IntelliJ IDEA 配置 Tomcat 运行web项目
运行前提: 配置好 Java 的运行环境 配置好 Tomcat 安装 IntelliJ IDEA 开始 1.创建项目并配置 关于配置SDK,等建完项目再说 没有配置SDK的话 会出现下面的弹框,点击 ...
- 【Python学习之六】高阶函数2(map、reduce、filter、sorted)
3.filter filter()也接收一个函数和一个序列.和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是True还是False决定保留还是丢弃该元素.相当于一 ...
- 使用linux安装gitolite管理git
系统:centos7 服务器:阿里云 一.前期准备 1.安装git yum install git 2.安装perl yum install perl 3.安装openssh yum install ...
- python入门:UTF-8转换成GBK编码
#!/usr/bin/env python # -*- coding:utf-8 -*- #UTF-8转换成GBK编码 #temp(临时雇员,译音:泰坡) #decode(编码,译音:迪口德) #en ...
- 【MySQL】mac环境下使用navicat premium连接mysql乱码问题
---恢复内容开始--- 最重要的两点:使用navicat premium创建mysql连接和在mysql连接里面创建数据库时,需要注意. 1.创建连接时,Encoding不需要手动选择,保持Auto ...
- php加密解密函数大全
第一种: <?php function encryptDecrypt($key, $string, $decrypt){ if($decrypt){ $decrypted = rtrim(mcr ...
- Word 借助VBA一键实现插入交叉引用
最近写论文的时候,经常需要向上或向下插入题注的交叉引用,word 自带的界面往往需要操作多次,才能实现插入.而平时使用较多的只是交叉引用附近的题注,比如如图1.1所示,在图1.1中等,距离较远的引用则 ...
- Python 中的for,if-else和while语句
for 循环 功能 for 循环是一种迭代循环机制,迭代即重复相同的逻辑操作,每次的操作都是基于上一次的结果而进行的.并且for循环可以遍历任何序列的项目,如一个列表或者一个字符串 语法 for 循环 ...
- ESP8266入门学习笔记1:资料获取
乐鑫官网:https://www.espressif.com/zh-hans/products/hardware/esp8266ex/overview 乐鑫资料:https://www.espress ...