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

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleJS页面下拉100像素出现悬浮窗口/title脚本src=' http : js/jquery-1。10 .1 .量滴js ' type=' text/JavaScript '/script/head dydiv style=' height :5000 px；'/divstyle type='text/css ' .fdPhone { position : fixed _ position : absolute宽度宽度：320像素高度：50 px位置：固定；左侧：50%;边距-左侧：-160像素；top :0 pxdisplay : none }/style div class=' FDPhone ' a href=' tel :123456789 ' target=' _ blank ' img src=' http : images/phone。gif ' width=' 320 ' height=' 50 '/a/div脚本类型=' text/JavaScript ' $(function(){ $(window)).滚动（函数(){ if($(window)).scrollTop()=100){ //向下滚动像素大于这个值时，即出现浮窗~ $('.fdPhone ').法丁(300);//浮窗淡入的时间，越小出现的越快~ }else{ $(' .fdPhone ').淡出(300)；//浮窗淡出的时间，越小消失的越快~ } });$('.actGoTop ').单击(function(){$('html，body ').动画({scrollTop: '0px'}，800)；});//浮窗动画停留时间，越小消失的越快~});/脚本/正文/html效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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