jquery判断滚动到某个div显示底部按钮
jQuery 显示 判断 按钮 div 某个 滚动 底部
2023-09-14 08:58:23 时间
判读滚动某个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实时显示鼠标指针位置和键盘ASCII码
- jquery手机全屏上下滑动
- Jquery操作一遍过
- jQuery分页插件(jquery.page.js)的使用
- [Web 前端] 流行的JavaScript库 ——jQuery
- jQuery UI在Server 2008 IE8下DatePicker问题修复
- jquery 清除内容
- JS原生方法实现jQuery的ready()
- jquery实现动态五角星评分
- jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
- jQuery Custom Selector JQuery自定义选择器
- 笔记7:Jquery知识
- jQuery.validator 验证规则详解
- 电子签章盖章之jQuery插件jquery.zsign
- jquery获取元素值
- 左侧导航条+中间显示内容+右侧菜单配置,Bootstrap+AdminLTE+Jquery
- SAP UI5应用里使用jQuery.ajax异步读取xml文档并显示在SAP UI5应用界面上
- radiantq:jQuery Gantt Package--好使的HTML5甘特图
- jquery的toggle动画效果显示隐藏
- jQuery/javascript实现网页注册的表单验证
- 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决
- jquery客户端验证插件
- 使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
- jquery获得option的值和对option进行操作
- jquery案例7——王者显示与隐藏、淡入、淡出、遮罩层、fadeIn、fadeOut