jquery判断滚动到某个div显示底部按钮
判读滚动某个div显示底部按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>判断滚动到某个div显示底部按钮</title>
<style>
*{margin:0;padding:0}
body{ max-width: 640px; margin:0 auto; }
.box,.box2{ width: 100%; height: 1500px;}
.box3{ height: 350px; background:#ddd; }
.box{ background-color:#DB2350 }
.box2{ background-color:#5CA26C}
.btn{ position: fixed; bottom:0; left: 50%; transform: translateX(-50%);-webkit-transform: translateX(-50%); width: 200px; height: 70px; border-radius: 5px; line-height: 70px; text-align: center; color: #fff; font-size: 16px; display: none; background-color: red; font-size: 25px; }
</style>
</head>
<body>
<div class="box" ></div>
<div class="box3" id="box">滚到到这个div,显示底部按钮</div>
<div class="box2"></div>
<div id="btn" class="btn">点击按钮</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
// 监听滚动事件
$(window).scroll(function(){
// 获得div的高度
var h = $("#box").offset().top;
var wt = $(this).scrollTop();
wt>h?$("#btn").show():$("#btn").hide()
//这个判断两种写法
// if($(this).scrollTop()>h){
// // 滚动到指定位置
// $("#btn").show();
// } else {
// $("#btn").hide();
// }
}); })
</script>
</body>
</html>
效果图:
jquery判断滚动到某个div显示底部按钮的更多相关文章
- jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动
jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 http://www.17sucai.com/pins/demoshow/382
- javascript&jquery 判断滚动到页面底部
js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2. ...
- jquery之超简单的div显示和隐藏特效demo
闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...
- jquery 判断文字是否超出div出现三个点的省略号
现在有个需求,就是一个div宽度固定,但是文字可能会超出,超出出现三个点省略,然后鼠标划入的时候显示全部,不超出鼠标划入就不显示,这就意味着要判断文字是否超出了 参考代码 <html lang= ...
- jquery判断页面是否滑动到最底部
// 滚动到底部,向下的箭头消失 var $down = $('.down'); var $window = $(window); var $document = $(document); $wind ...
- Selenium WebDriver- 使用显示等待,判断搜狗的输入框是否显示,按钮是否可点击,然后在输入光荣之路搜索词,然后在点击搜索。
#encoding=utf-8 from selenium import webdriver import time from selenium.webdriver.common.by import ...
- liMarquee – jQuery无缝滚动插件(制作跑马灯效果)
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...
- jquery判断页面滚动条(scroll)是上滚还是下滚,且是否滚动到头部或者底部
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jquery判断div是否显示或者隐藏
jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...
随机推荐
- SVN:项目管理工具
svn:项目管理工具. 我们在进行团队开发的时候,每个人负责不同的层,比如:A负责DAO层,B负责SERVICE层,C负责DOMAIN层.我们开发完了自己管理的各层后需要将各层整合在一起,肯定不是拿U ...
- 基于KVM的qemu中宿主机和虚拟机间的通信
qga是一个运行在虚拟机内部的普通应用程序(可执行文件名称默认为qemu-ga,服务名称默认为qemu-guest-agent),其目的是实现一种宿主机和虚拟机进行交互的方式,这种方式不依赖于网络,而 ...
- javax.mail 发送邮件 , greenMail 测试 , spring
发送邮件接口: package com.manxu.archetype.account.email; import javax.security.auth.login.AccountException ...
- 8.19 extjs jar 包使用。
一.文件结构在ExtJS官网下载好4.0的开发包解压后,我们得到如图的文件结构 文件/文件夹名作用builds 压缩后的ExtJS代码,体积更小,更快docs 开发文档examples 官方演示 ...
- 2018上IEC计算机高级语言(C)作业 第0次作业
最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得来自老师的哪些帮助? 最理想的的师生关系是健身教练和学员的关系,其实我个人感觉不太认同,我觉得老师和学生之间更多的是一种共生关系,像植 ...
- 2018.09.08 bzoj4518: [Sdoi2016]征途(斜率优化dp)
传送门 把式子展开后发现就是要求: m∗(∑i=1msum′[i])−sum[n]2" role="presentation" style="position: ...
- Django入门指南-第10章:Django Admin 介绍(完结)
在浏览器中打开该URL:http://127.0.0.1:8000/admin/ 我们可以检查一切是否正常,打开URL http://127.0.0.1:8000 我们首先创建一个管理员帐户: pyt ...
- Django的路由层(1)
https://www.cnblogs.com/yuanchenqi/articles/8876685.html URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为 ...
- 基于SceneControl的三维GIS开发
在ArcGIS体系中,三维开发包括两种:基于Scene的三维开发和基于Globe的三维开发. 由上图可以看出,两种开发的接口都很相似,掌握了Scene开发会相对容易的过渡到Globe开发中. 正如上图 ...
- linux常见命令整理
Linux管理文件和目录的命令 命令 功能 命令 功能 pwd 显示当前目录 ls 查看目录下的内容 cd 改变所在目录 cat 显示文件的内容 grep 在文件中查找某字符 cp 复制文件 touc ...