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 相关文章推荐
给Function做的OOP扩展
May 07 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
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框架的理由
2015/09/26 PHP
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
料理师求职信
2014/01/30 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
教师见习总结范文
2015/06/23 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers