判读滚动某个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. PHP+Gtk实例(求24点)

    作者: Laruence(   ) 本文地址: http://www.laruence.com/2009/05/26/871.html 转载请注明出处 最近要安排我为BIT提供的<PHP高级应用 ...

  2. js和jquery获取span里面的值

    JQ和Js获取span标签的内容 html: 1 <span id="content">‘我是span标签的内容’</span> javascript获取: ...

  3. 现代编译原理－－第二章（语法分析之LR（1））

    (转载请表明出处  http://www.cnblogs.com/BlackWalnut/p/4472772.html) 前面已经介绍过LL(1),以及如何使用LL(1)文法.但是LL(K)文法要求在 ...

  4. 02 请求库之 requests模块

    requests模块   一 介绍 #介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) #注意:requ ...

  5. 品味性能之道<八>：Loadrunner关联技巧与字符处理

    一.概述       Loadrunner作为HP出品的性能测试工具,拥有太多奇妙魔法甜点供予性能测试人员享用,其中吃起来比较有嚼劲的那就是关联了.当然在关联之后我们还需要一些简单的字符处理,用以生成 ...

  6. IE浏览器调用jquery需要注意的小问题

    今天在进行前端重构的时候发现了一个非常奇怪的浏览器兼容性问题,我想在网页上放一个JS的特效,于是下载了jquery-easyui,经过修改完成所需要的效果后,准备放入项目中,发现在IE浏览器中无法运行 ...

  7. Java中的内存划分

    Java程序在运行时,需要在内存中分配空间.为了提高运行效率,就对数据进行了不同的空间划分.因为每一片区域都有特定的数据处理方式和内存管理方式. 具体分为5种内存空间: 程序计数器:保证线程切换后能恢 ...

  8. Notepad++ 中如何将代码格式化

    Notepad++ 中如何将代码格式化   在阅读别人的代码时偶尔会遇到格式很乱,阅读起来很费劲的情况,若手动改,很容易出错且很费时间,这时可以借助一些专业的编辑器来格式化代码,NotePad++是一 ...

  9. C语言之计算字符串最后一个单词的长度，单词以空格隔开

    //计算字符串最后一个单词的长度,单词以空格隔开. #include<stdio.h> #include<string.h> #include<windows.h> ...

  10. ArcGIS Desktop python Add-in Python 插件的文件结构

    如上图所示: 插件文件夹在根目录下有一个config.xml文件,这个文件保存有在向导添加的描述该插件的定制信息. 插件还有一个安装文件夹,这个文件夹的主要功能是存放Python脚本. 你可以在安装文 ...