jQuery实现页面下拉100像素出现悬浮窗口的方法


Posted in Javascript onSeptember 05, 2016

本文实例讲述了jQuery实现页面下拉100像素出现悬浮窗口的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS 页面下拉100像素出现悬浮窗口</title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
</head>
<body>
<div style="height:5000px;"></div>
<style type="text/css">
.fdPhone{position:fixed; _position:absolute; width:320px; height:50px; position:fixed; left:50%; margin-left:-160px; top:0px; display:none;}
</style>
<div class="fdPhone">
<a href="tel:123456789" target="_blank"><img src="images/phone.gif" width="320" height="50"></a>
</div>
<script type="text/javascript">
$(function(){
  $(window).scroll(function() {
    if($(window).scrollTop() >= 100){ //向下滚动像素大于这个值时,即出现浮窗~
      $('.fdPhone').fadeIn(300); //浮窗淡入的时间,越小出现的越快~
    }else{
      $('.fdPhone').fadeOut(300); //浮窗淡出的时间,越小消失的越快~
    }
  });
  $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //浮窗动画停留时间,越小消失的越快~
});
</script>
</body>
</html>

效果图:

jQuery实现页面下拉100像素出现悬浮窗口的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
vue.js评论发布信息可插入QQ表情功能
Aug 08 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 #Javascript
AngularJS实现标签页的两种方式
Sep 05 #Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 #Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 #Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 #Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 #Javascript
JS简单随机数生成方法
Sep 05 #Javascript
You might like
php实现字符串翻转的方法
2015/03/27 PHP
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
python实现自动登录
2018/09/17 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
Flask配置Cors跨域的实现
2019/07/12 Python
python打包成so文件过程解析
2019/09/28 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
python logging模块的使用
2020/09/07 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
市场营销专业毕业生自荐信
2013/11/02 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
工会积极分子个人总结
2015/03/03 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript