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 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 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
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
vue.js实现备忘录demo
2019/06/26 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python如何求100以内的素数
2020/05/27 Python
python模块如何查看
2020/06/16 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
init进程的作用
2012/04/12 面试题
老师的检讨书
2014/02/23 职场文书
面试必备的求职信
2014/05/25 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
建筑工地质量标语
2014/06/12 职场文书
辞职信标准格式
2015/02/27 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书