第1463天:jquery 处理滚动条拖动时悬浮对象(兼容ie6,非expression方法)

星期二 多云 16~25℃

jquery:滚动条拖动时悬浮对象(兼容ie6,非expression方法)

今天用 jquery 处理了一个“当对象贴近窗口上边沿时自动悬浮”的效果。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jquery,滚动条拖动时悬浮对象(兼容ie6),非expression方法</title>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<style type="text/css">
body { margin:0; }
#top { height:200px; background:#ccc; margin-bottom:20px; }
#container { width:960px; margin:0 auto; }
.main { float:left; width:840px; height:1000px; margin-right:20px; background:#eee; }
.side { float:left; width:100px; }
#float { width:70px; padding:10px; border:1px solid #ffecb0; background-color:#fffee0; }
</style>
</head>
<body>
<div id="top"></div>
<div id="container">
 <div class="main"></div>
 <div class="side">
  <div id="float">悬浮</div>
 </div>
</div>
<script type="text/javascript">
function listenScroll(element) {
 var obj_top = element.position().top;
 $(window).scroll(function() {
  var window_top = $(this).scrollTop();
  if (window_top >= obj_top) {
   if (!$.browser.msie || ($.browser.msie && $.browser.version >= 7)) {
    element.css({
     position: "fixed",
     top: 10
    }); 
   } else {
    element.css({
     position: "absolute",
     top: window_top + 10
    });
   }
  } else {
   element.css("position", "static");
  }
 });
}
$(function(){
 listenScroll($("#float"));
})
</script>
</body>
</html>


友吧今天

“话题”表单页初步完成。

把表单页的“主题、类型”由原先的“tag形式”改为“下拉形式”。虽然铺开来可以让用户少点一下,但是因为数量较多,全铺开来,对用户视觉也造成一定影响。

RSS

上一篇:

下一篇:

Comment (1)

  1. 能不能解决在IE6下不震动,在IE6下,浮动那个会震动

    回复:尝试过一些方法,没解决。

    zhugao 回复于 2012-6-13 20:24:00

发表评论

电子邮件地址不会被公开。 必填项已用*标注