判读滚动某个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. SSH框架整合jar包时的注意事项

    SSH框架整合jar包时的注意事项: 在将三个框架所需的jar整合到一起后,要看一下有没有相同类型但是版本不同的jar包,如果有的话,需要把低版本的jar包删除掉,否则会报错.我这里整合的时候java ...

  2. MSVCR90D.dll

    http://stackoverflow.com/questions/218747/msvcr90d-dll-not-found-in-debug-mode-with-visual-c-2008 I ...

  3. .net core web api swagger 配置笔记

    参考网址: --配置步骤见如下链接https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/web-api-help-pages-using-swa ...

  4. 05 Maven 生命周期和插件

    Maven 生命周期和插件 除了坐标.依赖以及仓库之外, Maven 另外两个核心概念是生命周期和插件.在有关 Maven 的日常使用中,命令行的输入往往就对应了生命周期,如 mvn package ...

  5. Git使用1

    1.先配置本地Git E:\personal>git config –-global user.name "lewy" E:\personal>git config – ...

  6. Java 继承关系中：static，构造函数，成员变量的加载顺序

    首先看下面的例子: package simple.demo; /** * @author Administrator * @date 2019/01/03 */ public class ClassA ...

  7. RabbitMQ添加rabbitmqadmin和其使用方法（类似Redis的redis-cli）

    一:先进入rabbitmq的安装目录下的bin目录,执行wget -c http://localhost:15672/cli/rabbitmqadmin:(前提是plugin management已经 ...

  8. Win7下U盘安装CentOS-7-x86_64-DVD-1503-01

    转载自:http://blog.sina.com.cn/s/blog_842d5c8a0102vr12.html 昨天在Win7下装CentOS7,本以为之前装CentOS6.5很熟练了,结合网上的帖 ...

  9. SQLite数据库下载、安装和学习

    SQLite 是一个开源的嵌入式关系数据库,实现自包容.零配置.支持事务的SQL数据库引擎. 其特点是高度便携.使用方便.结构紧凑.高效.可靠.与其他数据库管理系统不同,SQLite 的安装和运行非常 ...

  10. 一个用css写出来的下拉菜单

    1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 ...