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 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
JavaScrip数组去重操作实例小结
Jun 20 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下一个非常全面获取图象信息的函数
2008/11/20 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
jQuery多条件筛选如何实现
2015/11/04 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
初探nodeJS
2017/01/24 NodeJs
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
TensorFlow实现Logistic回归
2018/09/07 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
元旦红领巾广播稿
2014/02/19 职场文书
药剂专业求职信
2014/06/20 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
让世界充满爱观后感
2015/06/10 职场文书
走进科学观后感
2015/06/18 职场文书
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python