jQuery简单实现页面元素置顶时悬浮效果示例


Posted in Javascript onAugust 01, 2016

本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法。分享给大家供大家参考,具体如下:

一、JS Code:

<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>

二、Html Code:

<div class="float" id="float" style="border: 1px solid #e0e0e0; padding: 10px;">
  我是置顶时悬浮的区域</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

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

Javascript 相关文章推荐
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 #Javascript
jQuery简单实现title提示效果示例
Aug 01 #Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 #Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 #Javascript
jQuery获取与设置iframe高度的方法
Aug 01 #Javascript
jQuery+Pdo编写login登陆界面
Aug 01 #Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 #Javascript
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
PHP 数组遍历顺序理解
2009/09/09 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
MSN消息提示类
2006/09/05 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
八大排序算法的Python实现
2021/01/28 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
Python如何将字符串转换为日期
2020/07/31 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
搞笑获奖感言
2014/01/30 职场文书
机房搬迁方案
2014/05/01 职场文书
敬老月活动总结
2014/08/28 职场文书
村官个人总结范文
2015/03/03 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
通知怎么写?
2019/04/17 职场文书