<!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自动隐藏和显示的更多相关文章

  1. 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

    $(function () {                        //绑定滚动条事件              //绑定滚动条事件            $(window).bind(&q ...

  2. 承载地图的div如果隐藏再显示，则定位时会定位到页面左上角

    承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.

  3. 内容高度小于窗口高度时版权div固定在底部

    <!doctype html><html><head><meta charset="utf-8"><title>文档内容 ...

  4. 简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示

    1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...

  5. 固定定位导致$(window).scrollTop();获取滚动后到顶部距离总是为0

    如下移动端索引列表页面(点击某元素后弹出的页面)    我想用 $(window).scrollTop(); 获取页面滚动后距离顶部的距离,但获取到的值总是0 期间查了很久,但都无疾而终,后来看到一篇 ...

  6. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  7. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  8. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  9. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

随机推荐

  1. java算法 第七届 蓝桥杯B组（题+答案） 1.煤球数目

    1.煤球数目  (结果填空) 有一堆煤球,堆成三角棱锥形.具体:第一层放1个,第二层3个(排列成三角形),第三层6个(排列成三角形),第四层10个(排列成三角形),....如果一共有100层,共有多少 ...

  2. Unity Pitfall 汇总

    [Unity Pitfall 汇总] 1. 当脚本被绑定到一个对象时,一个类对象即会被创建,此意味着此类构造函数会被调用.所以在构造函数中不要调用任何运行时才创建的类.相应的初始化方代码应该移至Sta ...

  3. 10 华电内部文档搜索系统 search05

    上一节讲述了索引更新的处理方案,这一节首先讲述索引维护的相关方案.每创建一个索引,把文档相关的信息插入到数据库中.这个时候会产生一个唯一的对应的ID,获取这个ID之后,把这个ID又插入到对应的索引文件 ...

  4. 保持在Div 底部的方法

    <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content=&quo ...

  5. UNITY调用安桌方法出现 JNI: Init'd AndroidJavaClass with null ptr!

    UNITY调用安桌方法出现 JNI: Init'd AndroidJavaClass with null ptr! 原因是····· 得运行在一个真正的Android设备上! 得运行在一个真正的And ...

  6. GameObject.Find 使用技巧

    GameObject.Find是全局搜索 如果你已经知道这个元件在哪个元件里面的话,且担心场景中有重名元件,可以这样写 GameObject.Find ("Canvas/Panel/Imag ...

  7. 在Qt中使用SQLite数据库

    前言 SQLite(sql)是一款开源轻量级的数据库软件,不需要server,可以集成在其他软件中,非常适合嵌入式系统. Qt5以上版本可以直接使用SQLite(Qt自带驱动). 用法 1 准备 引入 ...

  8. JVM致命错误日志（hs_err_pid.log）解读

    JVM致命错误日志(hs_err_pid.log)解读 摘自:https://blog.csdn.net/u013938484/article/details/51811400 2016年07月02日 ...

  9. 44个javascript 变态题解析

    原题来自: javascript-puzzlers 读者可以先去做一下感受感受. 当初笔者的成绩是 21/44… 当初笔者做这套题的时候不仅怀疑智商, 连人生都开始怀疑了…. 不过, 对于基础知识的理 ...

  10. Oracle 用户

    1.关于创建用户; 2.用户配置文件; 3.创建用户; 4.更改用户; 5.删除用户; 1.关于创建用户: 1.1 用户名:创建数据库用户必须具有 Create user 系统权限,必须指定用户名和密 ...