国产综合精品-久久久久久成人毛片免费看-69久久夜色精品国产69-美国十次啦怡红院

Web前端知識

首頁 > 免費(fèi) > Web前端知識 >

三種方法實(shí)現(xiàn)智能浮動(dòng)

來源:北京匯仁智杰科技有限公   時(shí)間:2015-12-28   點(diǎn)擊:

  三種方法實(shí)現(xiàn)智能浮動(dòng)

  方法一:

  <script type="text/javascript">

  $(function() {

   var offset = $("#text-3").offset();

  var topPadding = 15;

   $(window).scroll(function() {

   if ($(window).scrollTop() > offset.top) {

   $("#text-3").stop().animate({

   marginTop: $(window).scrollTop() - offset.top + topPadding

   });

  } else {

   $("#text-3").stop().animate({

   marginTop: 0

   });

  };

   });

   });

   </script>

  方法二: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) { //如果滾動(dòng)到頁面超出了當(dāng)前元素element的相對頁面頂部的高度

   if (window.XMLHttpRequest) { //如果不是ie6

   element.css({

   position: "fixed",

   top: 0

   }).addClass("shadow"); 

   } else { //如果是ie6

  element.css({

  top: scrolls

   }); 

   }

   }else {

   element.css({

   position: pos,

  top: top

   }).removeClass("shadow") 

   }

   });

   };

   return $(this).each(function() {

  position($(this));

   });

  };

  $(function(){

  $(".wrapper-nav").smartFloat();

  });

  方法三:MooTools方式 

  var $smartFloat = function(elements) {

  var position = function(element) {

   var top = element.getPosition().y, pos = element.getStyle("position");

   window.addEvent("scroll", function() {

  var scrolls = this.getScroll().y;

   if (scrolls > top) {

   if (window.XMLHttpRequest) {

  element.setStyles({

  position: "fixed",

  top: 0

   });

  } else {

   element.setStyles({

  top: scrolls

   });

   }

   }else {

  element.setStyles({

   position: "absolute",

   top: top

  });

   }

   });

  };

   if ($type(elements) === "array") {

  return elements.each(function(items) {

  position(items);

   });

  } else if ($type(elements) === "element") {

   position(elements);

  }

  };

網(wǎng)絡(luò)營銷推廣?。”本﹨R仁智杰科技有限公司!

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:15201492965
業(yè)務(wù)QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號-1

匯仁智杰與眾不同

  • 有網(wǎng)絡(luò)推廣經(jīng)驗(yàn)
  • 有網(wǎng)站建站隊(duì)伍
  • 有大型網(wǎng)站建設(shè)經(jīng)驗(yàn)
  • 致力于營銷型網(wǎng)站建設(shè)
  • 始終堅(jiān)持技術(shù)和服務(wù)同樣重要
查看PC版網(wǎng)站
備案號:京ICP備15021091號-1 版權(quán)所有:匯仁智杰