判读滚动某个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. 关于session报错问题。

    刚开始一直报500错误,页面不提示,也没想着去查看日志文件.好几天了,一看日志,发现是这个问题.问了一下,是session的问题. 2017/07/25 16:57:49 [error] 2300#0 ...

  2. 2015湖南湘潭 D 二分

    2015湖南湘潭第七届大学生程序设计比赛 D题 Fraction Accepted : 133   Submit : 892 Time Limit : 1000 MS   Memory Limit : ...

  3. jsp传中文乱码问题 encodeURIComponent（）编码方法

    方法一: jQuery.ajax({            type:"POST",            url:"${ctx}/offer.do",     ...

  4. DB2通用数据库性能调整的常用方法

    DB2通用数据库性能调整的常用方法 DB2通用数据库性能调整的常用方法 Agenda 统计值更新--runstats  调整Buffer pool  调整日志缓冲区大小  应用程序堆大小  排序堆大小 ...

  5. 修改BUG心得

      修改BUG心得 分类: 项目管理/CMMI2013-01-14 22:06 845人阅读 评论(0) 收藏 举报 目录(?)[-] 一 二 三 一. 1.写第一版时就杜绝这些的发生. 2.思维要开 ...

  6. 2018.09.28 牛客网contest/197/B面积并（二分+简单计算几何）

    传送门 比赛的时候把题目看成求面积交了,一直没调出来. 下来发现是面积并气的吐血. 码了一波发现要开long double. 然而直接用现成的三角函数会挂. 因此需要自己手写二分求角度. 大致思路就是 ...

  7. Cygwin工具的简单使用

    简介 从使用角度来看:Cygwin就是一个windows软件,该软件就是在windows上仿真linux操作系统.简言之,cygwin是一个在windows平台上运行的 linux模拟环境,使用一个D ...

  8. 浅析基于AXIS框架的WebService

    一.写在前面 之前做项目用到了基于Axis的WebService,为了更进一步的理解和记忆,在这里通过代码实践和源码分析来完整的做一遍Axis的WebService以及对应的客户端调用实践,并和其它的 ...

  9. 二）spring 集成 ehcache jgroups 集群

    依赖 <dependency> <groupId>org.springframework</groupId> <artifactId>spring-co ...

  10. chrome 概述

    Chrome, Firebug, Filddle 调试:http://www.zhihu.com/question/35667558/answer/63936233 Chrome开发者工具系列: ht ...