判读滚动某个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. 【转】Hadoop HDFS分布式环境搭建

    原文地址  http://blog.sina.com.cn/s/blog_7060fb5a0101cson.html Hadoop HDFS分布式环境搭建 最近选择给大家介绍Hadoop HDFS系统 ...

  2. PAT 1077 互评成绩计算（20）（代码+思路）

    1077 互评成绩计算(20 分) 在浙大的计算机专业课中,经常有互评分组报告这个环节.一个组上台介绍自己的工作,其他组在台下为其表现评分.最后这个组的互评成绩是这样计算的:所有其他组的评分中,去掉一 ...

  3. Ubuntu部分快捷键的使用简介

    1.切换到字符界面 Ctrl+Alt+F1 切换到tty1字符界面 Ctrl+Alt+F2 切换到tty2字符界面 Ctrl+Alt+F3 切换到tty3字符界面 Ctrl+Alt+F4 切换到tty ...

  4. cocos2d-js IOS接facebook插件

    当前测试版本:cocos2d-x 3.8.1       3.7也试用,之下的版本没测过,一般是路径改变,文件名称一般不会变 注:当前工程是通过控制台new的工程,不是cocosStudio创建的工程 ...

  5. C和C++之间库的互相调用

    http://www.cppblog.com/wolf/articles/77828.html 昨晚有个朋友问我关于在C中调用C++库的问题,今天午饭后,由于脖子痛的厉害而没有加入到我们组的“每天一战 ...

  6. 100 floors 2 eggs

    https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...

  7. linux的零碎知识

    一  nfs服务器 1  NFS的介绍:是Network File System的简写,是网络文件系统.用于分散式文件系统的协定,由sun公司开发的,在1984年向外公布的. 2  NFS的功能:是通 ...

  8. jQuery DataTables插件分页允许输入页码跳转

    背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...

  9. 2018.07.22 洛谷P2986 伟大的奶牛聚集（树形dp）

    传送门 给出一棵树,树有边权和点权,若选定一个点作为中心,这棵树的代价是所有点权乘上到根的距离的和.求代价最小. 解法:一道明显的换根dp" role="presentation& ...

  10. 2018.07.08 POJ 2481 Cows（线段树）

    Cows Time Limit: 3000MS Memory Limit: 65536K Description Farmer John's cows have discovered that the ...