jQuery实现页面下拉100像素出现悬浮窗口的方法
更新时间：2016年09月05日 15:13:08 作者：onestopweb
这篇文章主要介绍了jQuery实现页面下拉100像素出现悬浮窗口的方法,涉及jQuery事件监听及针对页面元素的判定与动态操作技巧,需要的朋友可以参考下
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
实现表格隔行换色，且感应鼠标行变色的方法有很多，在本文将为大家介绍的是使用jQuery插件来实现，具体如下，感兴趣的朋友可以练练手2013-09-09
本文主要对表格的简单应用：表格变色;表格展开关闭;表格内容筛选进行实例分析介绍。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
如何创建一个平滑的滚动效果是本文的目的使用jQuery让您可以滚动到你的网页的顶部或底部,相当不错的一个效果，感兴趣的你可不要错过了哈2013-02-02
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
本文结合W3School的文档，分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异，并给出了图文对比教程，非常的简单实用，有需要的朋友可以参考下2014-11-11
jQuery 验证插件 Web前端设计模式(asp.net)
asp.net下用户注册页面的验证代码，花了点时间将验证做成一个jQuery插件，希望对需要的朋友有所帮助。2010-10-10
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
jQuery动画效果淡入浅出想必大家都有见到过吧，其实很很简单，通过fadeIn fadeOut方法便可轻松实现，具体如下，喜欢的朋友可以参考下，希望对大家有所帮助2013-08-08
下面小编就为大家带来一篇Jquery鼠标放上去显示全名的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
这篇文章主要介绍了jQuery实现导航滚动到指定内容效果,结合完整实例形式分析了页面元素属性动态变换操作相关技巧,涉及jQuery插件jquery.scrollto.js的使用,并附带demo源码下载供读者下载参考,需要的朋友可以参考下2016-09-09
本文主要介绍了jquery实现弹窗功能且弹出确认框始终位于窗口中间位置的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
在 jQuery 中，可以对每一个 DOM 对象保存私有的数据。2010-08-08
最新评论