js 固定悬浮效果实现思路代码

复制代码 代码如下:

  <script type="text/javascript">

  (function($){

  var ele_fix = $("#div_right"); //浮动窗口

  var _main = $(".main"); //浮动区域

  var ele_offset_top = ele_fix.offset().top; //浮动区域高度

  $(window).scroll(function(){

  var scro_top = $(this).scrollTop(); //当前高度

  var fix_foot_pos = parseInt(ele_fix.height())+parseInt(scro_top)-10; //浮动框最底部到最顶部高度

  var mainpos = parseInt(_main.offset().top)+parseInt(_main.height());

  if(scro_top <= ele_offset_top&&fix_foot_pos<mainpos){

  ele_fix.css({position: "static", top: -10});

  }else if(scro_top>ele_offset_top&&fix_foot_pos<mainpos){

  ele_fix.css({position: "fixed", top: -10});

  }else if(scro_top>ele_offset_top&&fix_foot_pos>mainpos){

  var posi = mainpos-fix_foot_pos-10;

  ele_fix.css({position: "fixed", top: posi});

  }

  });

  /*

  //方案二

  $(window).bind("scroll",function() {

  var temp = '1165';

  //判断往下滚

  if ($(document).scrollTop() > temp) { //如果大于这个高度,就置顶

  flag = false;

  $('#div_right').css({'position':'fixed', 'top':'-10px', 'margin-top':'0px'});

  }

  if ($(document).scrollTop() <= temp) { //如果小于这个高度,则恢复原来状态

  flag = true;

  $('#div_right').css('position','');

  }

  });

  */

  })(jQuery);

  </script>