jQuery实现页面滚动时智能浮动定位_网络技术_宿州市腾雀网络科技有限公司

jQuery实现页面滚动时智能浮动定位

发布时间 - 2026-01-10 22:22:54 点击率：次

话不多说，请看代码：

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# jQuery # 滚动 # 智能浮动 # 定位 # jQuery实现页面滚动时层智能浮动定位实例探讨 # js页面滚动时层智能浮动定位实现(jQuery/MooTools) # 等你 # 多说 # 绑定 # 我在这里 # tit # size # align # center # Arial # px # color # height # demo # width # float # wrap # border # background # ccc # dashed

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：苹果11手机像素怎么调_苹果11像素调节技巧【步骤】

下一篇：云服务器搭建网站后，SEO优化需要注意哪些方面？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：苹果11手机像素怎么调_苹果11像素调节技巧【步骤】

下一篇：云服务器搭建网站后，SEO优化需要注意哪些方面？