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 相关文章推荐
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
JSONObject使用方法详解
Dec 17 Javascript
AngularJS实现路由实例
Feb 12 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 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防注
2007/01/15 PHP
php仿discuz分页效果代码
2008/10/02 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
js密码强度检测
2016/01/07 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
Python 可爱的大小写
2008/09/06 Python
python抓取网页图片示例(python爬虫)
2014/04/27 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
西式婚礼证婚词
2014/01/12 职场文书
故宫的导游词
2015/01/31 职场文书
大学毕业生个人总结
2015/02/28 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
用python修改excel表某一列内容的操作方法
2021/06/11 Python
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python