当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
<!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>
效果如图:

如果文章中有不对之处,随时欢迎您的纠正~~
当页面滚动到距顶部一定高度时某DIV自动隐藏和显示的更多相关文章
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
$(function () { //绑定滚动条事件 //绑定滚动条事件 $(window).bind(&q ...
- 承载地图的div如果隐藏再显示,则定位时会定位到页面左上角
承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.
- 内容高度小于窗口高度时版权div固定在底部
<!doctype html><html><head><meta charset="utf-8"><title>文档内容 ...
- 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示
1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...
- 固定定位导致$(window).scrollTop();获取滚动后到顶部距离总是为0
如下移动端索引列表页面(点击某元素后弹出的页面) 我想用 $(window).scrollTop(); 获取页面滚动后距离顶部的距离,但获取到的值总是0 期间查了很久,但都无疾而终,后来看到一篇 ...
- js判断滚动条是否已到页面最底部或顶部实例
原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...
- js原生 + jQuery实现页面滚动字幕
js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...
- jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度
在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...
- [HTML/JS] JQuery 页面滚动回到顶部
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...
随机推荐
- addin1
Mono.addin是一个插件框架,更多信息请访问 http://monoaddins.codeplex.com/
- Python与Go插入排序
#!/usr/bin/env python # -*- coding: utf-8 -*- # 插入排序 # 时间复杂度 O(n^2) import time def logger(func): st ...
- Nginx源码完全注释(6)core/murmurhash
下面是摘自 Google Code 的 Murmurhash 开源项目主页上的 Murmurhash2,Nginx 就是采用的这个. uint32_t MurmurHash2 ( const void ...
- Codeforces 703E DP + 因数分解 +离散化
题意:给你n个数,和一个数m, 问最小需要多少个数,可以让这些数乘起来是m的倍数.如果有多组,取和最小的那一组. 思路:因为m的范围到1e12,并且和取模相关,所以容易想到处理出m的约数,然后离散化一 ...
- android-tip-关于SpannableString的使用
如果想单独设置TextView上其中几个字的样式,该怎么办? 答案是使用SpannableString. 使用SpannableString可以为TextView上的某字或某些字设置: 前景色(For ...
- Openssl crl2pkcs7命令
一.简介 crl2pkcs命令用来根据CRL或证书来生成pkcs#7消息. 二.语法 openssl crl2pkcs7 [-inform PEM|DER ] [-outform PEM|DER ...
- Java泛型中的通配符
Java泛型中的通配符可以直接定义泛型类型的参数.而不用把该函数定义成泛型函数. public class GenericsTest { public static void main(String[ ...
- [C++] any number to binary (Bit manipulation)
any number to binary (Bit manipulation)
- 掌握所有IO口的外部中断
外部中断配置流程 1.初始化IO口工作在普通IO.上拉输入状态. 2.首先开IO口组中断(P0IE=1.P1IE=1.P2IE=1): 3.开组内对应的具体某IO口中断(P0IEN.P1IEN.P2I ...
- https://itunes.apple.com/cn/app/apache-overkill/id410553807?mt=8uo%3D6
https://itunes.apple.com/cn/app/apache-overkill/id410553807?mt=8uo%3D6 http://eplusgames.net/games/s ...