jQuery实现页面滚动时智能浮动定位


Posted in Javascript onJanuary 08, 2017

话不多说,请看代码:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery实现页面滚动时层智能浮动定位_前端开发</title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 body {
 font: 12px/1.8 Arial;
 color: #666;
 }
 h1.tit-h1 {
 font-size: 38px;
 text-align: center;
 margin: 30px 0 15px;
 color: #f60;
 }
 .wrap {
 border: 1px dashed #ccc;
 background: #f8f8f8;
 padding: 20px;
 }
 .demo {
 height: 1500px;
 }
 .float {
 width: 80px;
 padding: 10px;
 border: 1px solid #ffecb0;
 background-color: #fffee0;
 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
 -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);
 box-shadow: 1px 1px 2px rgba(0,0,0,.2);
 position: absolute;
 right: 10%;
 top: 131px;
 }
 </style>
 <script type="text/javascript" src="../..content/js/jquery-1.4.4.min.js"></script>
</head>
<body>
 <h1 class="tit-h1">jQuery实现页面滚动时层智能浮动定位_前端开发</h1>
 <div class="wrap">
 <div class="demo"></div>
 <div class="float" id="float">我在这里等你噢!</div>
 </div>
 <script type="text/javascript">
 $.fn.smartFloat = function () {
 var position = function (element) {
 var top = element.position().top, pos = element.css("position");
 $(window).scroll(function () {
  var scrolls = $(this).scrollTop();
  if (scrolls > top) {
  if (window.XMLHttpRequest) {
  element.css({
  position: "fixed",
  top: 0
  });
  } else {
  element.css({
  top: scrolls
  });
  }
  } else {
  element.css({
  position: pos,
  top: top
  });
  }
 });
 };
 return $(this).each(function () {
 position($(this));
 });
 };
 //绑定
 $("#float").smartFloat();
 </script>
 </div>
 <script type="text/javascript">
 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-20541395-2']);
 _gaq.push(['_trackPageview']);
 (function () {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(ga, s);
 })();
 </script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
JS实现的小火箭发射动画效果示例
Dec 08 Javascript
JavaScript相等运算符的九条规则示例详解
Oct 20 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 #Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 #Javascript
jQuery实现文字自动横移
Jan 08 #Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 #Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 #Javascript
详解js中==与===的区别
Jan 08 #Javascript
JavaScript 动态三角函数实例详解
Jan 08 #Javascript
You might like
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
浅谈PHP中的
2016/04/23 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python 数据加密代码
2008/12/24 Python
Python random模块常用方法
2014/11/03 Python
Python中的默认参数详解
2015/06/24 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
浅谈python 类方法/静态方法
2020/09/18 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
高中运动会广播稿
2014/01/21 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers