当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
2024-08-27 14:52:36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<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" />
<style type="text/css">
*{ margin: 0; padding: 0; }
body{ max-width: 640px; margin: 0 auto }
.div1{ background: #D5D4D4;height: 500px; margin-bottom: 10px; overflow: hidden; font-size: 50px;}
.div2{ background: #D5D4D4; height: 500px; margin-bottom: 10px; overflow: hidden;font-size: 50px;}
.div3{ background: #D5D4D4; height: 500px; margin-bottom: 10px; overflow: hidden;font-size: 50px;}
#scrollSearchDiv{ width: 100%; height: 40px; line-height: 40px; background-color: #EA5A5A; display: none; position: fixed; left: 0; bottom:0; text-align: center; font-size: 20px; color: #fff; }
</style>
</head>
<body>
<div class="div1 J_payBottomShow J_payPopupShow">1</div>
<div class="div2 J_payPopupShow">2</div>
<div class="div3 J_payPopupShow">3</div>
<div id="scrollSearchDiv">按钮显示隐藏</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript">
$(function () {
//绑定滚动条事件
//绑定滚动条事件
$(window).bind("scroll", function () {
var sTop = $(window).scrollTop();
var sTop = parseInt(sTop);
if (sTop >= 130) {
if (!$("#scrollSearchDiv").is(":visible")) {
try {
$("#scrollSearchDiv").slideDown();
} catch (e) {
$("#scrollSearchDiv").show();
}
}
}
else {
if ($("#scrollSearchDiv").is(":visible")) {
try {
$("#scrollSearchDiv").slideUp();
} catch (e) {
$("#scrollSearchDiv").hide();
}
}
}
});
})
</script>
</body>
</html>
效果如图:
如果文章中有不对之处,随时欢迎您的纠正~~
最新文章
- linux获取本机ip
- js document.createElement()的用法 (转)
- mysql 根据查询结果集更新
- MFC ADO连接Oracle12c数据库 客户端环境搭建
- win7安装apache或者php 5.7缺少vcruntime140.dll的问题
- SonarQube代码质量管理平台安装与使用
- ao的编辑操作
- Struts2技术详解(转)
- 杭电ACM 偶数求和
- t持久化与集群部署开发详解
- css-ie6下实现最小,最大宽度
- 引用dll文件要复制到本地
- 使用Dubbo、JSF等RPC框架时,对于异常的处理
- python 工具安装
- layUI 实现自定义弹窗
- C#简单接口和继承示例详解——快速入门
- python小白的自述
- 全志A33开发板的安卓控制LED-2-JNI基础
- PXE网络启动无人值守自动安装 centos 全程实录
- javascript 替换 window.onload 的 document.ready
热门文章
- 关于Excel无法打开,因为文件格式或文件扩展名无效的解决方法
- Elasticsearch-PHP 搜索操作
- NHibernate-NativeSQL
- SPI子系统分析之三:驱动模块
- SMTPSenderRefused: (530, ‘5.5.1 Authentication Required. Learn more at \n5.5.1
- 启动图。引导页以及EAIntroView的使用
- 554. Brick Wall最少的穿墙个数
- shiro 集成spring 配置 学习记录(一)
- Bigtable:一个分布式的结构化数据存储系统
- Emgu CV的配置以及在VS 2012中进行图像处理的步骤和实例