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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
json 定义
Jun 10 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 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
晶体管来复再生式二管收音机
2021/03/02 无线电
实用函数5
2007/11/08 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php探针不显示内存解决方法
2019/09/17 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python中Threading用法详解
2017/12/27 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
python自定义函数def的应用详解
2020/06/03 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
深入浅析Python代码规范性检测
2020/07/31 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
采购文员岗位职责
2013/11/20 职场文书
税务干部鉴定材料
2014/02/11 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
聘任合同书
2015/09/21 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL