Oct 19

Jquery制作左侧浮动层跟随页面滚动 不指定

admin , 21:41 , 编程 » 编程(脚本) , 评论(0) , 引用(0) , 阅读(891) , Via 本站原创 | |
搜索
我已经获得阿里云幸运券,准备分享给您。请点击获取  

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery制作左侧浮动层跟随页面滚动 -jiandanjie.com简单街省钱购物网站</title>
<!-- <script src="js/jquery.min.js" type="text/javascript"></script> 可以改为本地地址-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){
var obj = $('#fl_menu');
var offset = obj.offset();
var topOffset = offset.top;
var leftOffset = offset.left;
var marginTop = obj.css("marginTop");
var marginLeft = obj.css("marginLeft");

$(window).scroll(function() {
var scrollTop = $(window).scrollTop();

 if (scrollTop >= topOffset){

  obj.css({
   marginTop: 0,
   marginLeft: leftOffset,
   position: 'fixed',
  });
 }

 if (scrollTop < topOffset){

  obj.css({
   marginTop: marginTop,
   marginLeft: marginLeft,
   position: 'relative',
  });
 }
});
});

</script>
<style type="text/css">
/* fl_menu */
#fl_menu{position:absolute;top:50px;left:0px;z-index:9999;width:150px;height:50px;}
#fl_menu .label{padding-left:20px;line-height:20px;font-size:5px;font-weight:bold;background:#68EE68;color:#fff;letter-spacing:5px;}
/*
#fl_menu .menu{display:none;}
#fl_menu .menu .menu_item{display:block;background:#000;color:#bbb;border-top:1px solid #333;padding:10px 20px;font-size:12px;text-decoration:none;}
#fl_menu .menu a.menu_item:hover{background:#333;color:#fff;}
*/
</style>
</head>
<body>
 <div id="fl_menu" style="top: 50px;">
  <div class="label" ">jsfoot</div>
  <div class="label" style="opacity: 0.75;">
   <a href="http://jiandanjie.com/taozhe/keyword/v9XG!L67u6,G9w/sort/total_sales_des/start_price/500/ChannelID/shuma.html" >电器销量排行榜</a>
   <a href="http://jiandanjie.com/taozhe/keyword/xNDXsLGsv!4/sort/total_sales_asc/ChannelID/nanzhuangjingpin.html">精品男装销量排行榜</a>
   <a href="http://jiandanjie.com/" >养生栏目xxxxx</a>
   <a href="" >天猫购物到简单街</a>
   <a href="" >京东购物</a>
  </div>
 </div>
  
 <div id="text">
     <div class="header">d<span class="italic">简单街 省钱购物网站 ,精心筛选 天猫和京东 精品 ,值得访问购买</br></span>
  </div>
 </div>
 
 <h2>天猫访问</h2>
访问效果地址:http://itlife365.com/floatmenu.html

Tags: ,