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

作者：袖梨 2022-06-25

话不多说，请看代码：

 
 代码如下 复制代码
 
 jQuery实现页面滚动时层智能浮动定位_前端开发
 
 * {
 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;
 }
 
 javascript"src="../..content/js/jquery-1.4.4.min.js">
 jQuery实现页面滚动时层智能浮动定位_前端开发
 
 
 我在这里等你噢！
 
 
 $.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();
 
 
 
 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);
 })();
 
 

相关文章

精彩推荐