星期二 多云 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形式”改为“下拉形式”。虽然铺开来可以让用户少点一下,但是因为数量较多,全铺开来,对用户视觉也造成一定影响。