判读滚动某个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显示底部按钮的更多相关文章

  1. jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动

    jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 http://www.17sucai.com/pins/demoshow/382

  2. javascript&jquery 判断滚动到页面底部

      js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2. ...

  3. jquery之超简单的div显示和隐藏特效demo

    闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...

  4. jquery 判断文字是否超出div出现三个点的省略号

    现在有个需求,就是一个div宽度固定,但是文字可能会超出,超出出现三个点省略,然后鼠标划入的时候显示全部,不超出鼠标划入就不显示,这就意味着要判断文字是否超出了 参考代码 <html lang= ...

  5. jquery判断页面是否滑动到最底部

    // 滚动到底部,向下的箭头消失 var $down = $('.down'); var $window = $(window); var $document = $(document); $wind ...

  6. Selenium WebDriver- 使用显示等待，判断搜狗的输入框是否显示，按钮是否可点击，然后在输入光荣之路搜索词，然后在点击搜索。

    #encoding=utf-8 from selenium import webdriver import time from selenium.webdriver.common.by import ...

  7. liMarquee – jQuery无缝滚动插件（制作跑马灯效果）

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

  8. jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

随机推荐

  1. mysql 版本bug

    mysql命令gruop by报错this is incompatible with sql_mode=only_full_group_by 在mysql 工具 搜索或者插入数据时报下面错误: ERR ...

  2. JavaScript跨域总结与解决办法（转）

    什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...

  3. DirectFB编程

    一.简介 DirectFB是一个轻量级的提供硬件图形加速,输入设备处理和抽象的图形库,它集成了支持半透明的视窗系统以及在LinuxFramebuffer驱动之上的多层显示.它是一个用软件封装当前硬件无 ...

  4. RNA-seq要做几次生物学重复？找出来的100%都是真正的应答基因

    尹师妹:“哈师兄,做验证实验好辛苦,老板让我提高筛选差异基因的条件,尽量降低假阳性,我该怎么筛?” 小哈打开Evernote,给尹师妹看张表: “瞧见那个100%了吗?30 million mappe ...

  5. 设计神器 - 摹客设计系统上线了 | 晒出你的设计规范，赢iPad Pro！

    在国内,设计规范也许还是个不太常用的概念,但是如果你正好有参与互联网公司的产品设计,你应该早就已经体会到设计规范的重要性了.UI设计师总是要花费大量的时间和精力向开发描述一大堆设计细节,但是产品最后呈 ...

  6. DB2数据类型（抄袭）

    数字 数据类型        精度          最小值                                        最大值                       smal ...

  7. const变量指针赋值给非const类型的指针运行结果

    在c++可以定义一个const变量,然后把变量的值赋给一个非const指针,可以通过指针来改变const变量的值吗?下面的截图给出了答案

  8. 48 Fixing relationship Problems with Humor 用幽默解决人际关系问题

    48 Fixing relationship Problems with Humor 用幽默解决人际关系问题 ①We've all heard that laughter is the best me ...

  9. phonegap android插件，启动activity并返回值

    Your execute menthod is not quite right. When you do: return new PluginResult(PluginResult.Status.OK ...

  10. C++/C头文件 .h和 .c

    在C语言家族程序中,头文件被大量使用.一般而言,每个C++/C程序通常由头文件(header files)和定义文件(definition files)组成.头文件作为一种包含功能函数.数据接口声明的 ...