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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 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下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
python错误处理详解
2014/09/28 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
django实现用户登陆功能详解
2017/12/11 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
python队列queue模块详解
2018/04/27 Python
python实现三次样条插值
2018/12/17 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python中bisect的使用方法
2019/12/31 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
django orm模块中的 is_delete用法
2020/05/20 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
海外淘书首选:AbeBooks
2017/07/31 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
数控专业毕业生自荐信范文
2014/03/04 职场文书
副处级干部考察材料
2014/05/17 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2014年个人售房协议书
2014/10/30 职场文书
英语教师个人总结
2015/02/09 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
小学数学教师研修日志
2015/11/13 职场文书
教师素质教育心得体会
2016/01/19 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
Vue Element plus使用方法梳理
2022/12/24 Vue.js