快捷導(dǎo)航

jQuery實現(xiàn)頁面滾動時智能浮動定位

更新時間：2017年01月08日 14:43:13 作者：Mr.Bruce

本文主要介紹了jQuery實現(xiàn)頁面滾動時智能浮動定位的方法。附上完整代碼，具有一定的參考價值，下面跟著小編一起來看下吧

話不多說，請看代碼：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery實現(xiàn)頁面滾動時層智能浮動定位_前端開發(fā)</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實現(xiàn)頁面滾動時層智能浮動定位_前端開發(fā)</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>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: