两列若干个表格,往下拉到底使两列保持等齐的效果是怎么做的? 类似:http://www.etao.com/,页面往下,左侧的内容会自动跟着往下走。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 不知道你是不是这个意思<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>22</title><script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script><script type="text/javascript"> $(function () { var category = $('#side_category'), sidebar = $('.layout_sidebar'), content = $('.layout_content'), maxTop, baseTop, scrollTop; var setPosition = function () { maxTop = content.height() - category.get(0).offsetHeight; baseTop = sidebar.offset().top; scrollTop = $(document).scrollTop(); var t = scrollTop - baseTop; if (t > 0 && t <= maxTop) { category.css({ 'position': 'fixed', 'top': 0}); } else if (t > maxTop) { category.css({ 'position': 'absolute', 'top': maxTop }); } else if (t < 0) { category.css({ 'position': 'relative', 'top': 0 }); } }; if (category.size()) { setPosition(); $(window).scroll(function () { setPosition(); }); } });</script><style type="text/css">body{padding:0px;margin:0px;}.layout{width:300px;margin:0 auto;border:1px solid #ddd;}.main{overflow:hidden;}.layout_sidebar{float:left;overflow:hidden;}#side_category{width:60px;border:1px solid #ddd;background-color:#ddd;height:200px;}.layout_content{float:right;width:200px;border:1px solid #ddd;background-color:red;height:600px;}.foot{border-top:1px solid #ddd;height:800px;background-color:#999;}</style></head><body><div class="layout"><div class="main"><div class="layout_sidebar"><div id="side_category">left</div> </div> <div class="layout_content"> right </div> </div> </div> <div class="foot">foot</div></body></html> 顶一下,还没有解决,继续等待ing <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> new document </title><style> *{margin:0;padding:0;} .wrap{width:1000px;margin:0 auto;overflow:hidden;*zoom:1;} .left-box{position:relative;width:50%;float:left;} .left-box .box{left:0;top:0;background:#f5f5f5;} .right-box{position:relative;width:50%;float:right;} .right-box .box{left:0;top:0;background:#e0e0e0;}</style><script> window.onload = function(){ var leftBox = document.getElementById("left"); var rightBox = document.getElementById("right"); var fixedBox = leftBox.offsetHeight > rightBox.offsetHeight ? rightBox : leftBox; var isIE6 = !!window.ActiveXObject && !window.XMLHttpRequest; fixedBox.style.width = fixedBox.parentNode.offsetWidth + "px"; if(!isIE6){ fixedBox.style.position = "fixed"; fixedBox.style.left = fixedBox.parentNode.offsetLeft + "px"; }else{ fixedBox.style.position = "absolute"; window.onscroll = function(){ fixedBox.style.top = document.documentElement.scrollTop + "px"; } } }</script></head><body><div class="wrap"> <div class="left-box"> <div id="left" class="box"> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> <p>left box</p> </div> </div> <div class="right-box"> <div id="right" class="box"> <p>right box</p> <p>right box</p> <p>right box</p> <p>right box</p> <p>right box</p> <p>right box</p> </div> </div></div></body></html> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function () { //获取要定位元素距离浏览器顶部的距离 var navH = $(".Leigl").offset().top; //滚动条事件 $(window).scroll(function () { //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定 if (scroH >= navH) { $(".Leigl").css({ "position": "fixed", "top": 0, opacity: 0.7 }); } else if (scroH < navH) { $(".Leigl").css({ "position": "static", opacity: 1 }); } }) }); </script> <style type="text/css"> .Leig { width:100%; height:1000px; background: #333; border:1px red solid; } .Leigl { width:100%; height:100px; background:white; z-index:9999; border:1px red solid; }</style></head><body> <div class="Leig"> <div class="Leigl"> </div> </div></body></div></html> 拜托楼上的帮我改改吧,我对javascript实在是无从下手,而且css部分貌似也不是完全左右对称的,拜谢! java script 标准问题 canvas的贪吃蛇。 EXTJS Viewport滚动条 高手帮我看看怎么让这2个对象互不相关? ckeditor 3.0的图片上传功能好使吗? 腾讯返回的Json数据 你能看得懂几个?? 找一段儿正则! 请教怎样如实显示代码 JS实现视频的连续播放? 在ie中怎么移除一个指定的对象? EasyUI datagrid 300条记录 合并单元格效率问题 db.getTableData("US_APP.TB_APP_JTZY_SBTZ", "JZBM=1000002"); 中US...为什么不是table
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>22</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
<script type="text/javascript"> $(function () {
var category = $('#side_category'),
sidebar = $('.layout_sidebar'),
content = $('.layout_content'),
maxTop, baseTop, scrollTop;
var setPosition = function () {
maxTop = content.height() - category.get(0).offsetHeight;
baseTop = sidebar.offset().top;
scrollTop = $(document).scrollTop();
var t = scrollTop - baseTop;
if (t > 0 && t <= maxTop) {
category.css({ 'position': 'fixed', 'top': 0});
}
else if (t > maxTop) {
category.css({ 'position': 'absolute', 'top': maxTop });
}
else if (t < 0) {
category.css({ 'position': 'relative', 'top': 0 });
}
};
if (category.size()) {
setPosition();
$(window).scroll(function () {
setPosition();
});
}
});</script>
<style type="text/css">
body{padding:0px;margin:0px;}.layout{width:300px;margin:0 auto;border:1px solid #ddd;}
.main{overflow:hidden;}
.layout_sidebar{float:left;overflow:hidden;}
#side_category{width:60px;border:1px solid #ddd;background-color:#ddd;height:200px;}
.layout_content{float:right;width:200px;border:1px solid #ddd;background-color:red;height:600px;}
.foot{border-top:1px solid #ddd;height:800px;background-color:#999;}
</style>
</head>
<body><div class="layout">
<div class="main">
<div class="layout_sidebar">
<div id="side_category">left
</div>
</div>
<div class="layout_content">
right
</div>
</div> </div>
<div class="foot">foot</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style>
*{margin:0;padding:0;}
.wrap{width:1000px;margin:0 auto;overflow:hidden;*zoom:1;}
.left-box{position:relative;width:50%;float:left;}
.left-box .box{left:0;top:0;background:#f5f5f5;}
.right-box{position:relative;width:50%;float:right;}
.right-box .box{left:0;top:0;background:#e0e0e0;}
</style>
<script>
window.onload = function(){
var leftBox = document.getElementById("left");
var rightBox = document.getElementById("right");
var fixedBox = leftBox.offsetHeight > rightBox.offsetHeight ? rightBox : leftBox;
var isIE6 = !!window.ActiveXObject && !window.XMLHttpRequest; fixedBox.style.width = fixedBox.parentNode.offsetWidth + "px"; if(!isIE6){
fixedBox.style.position = "fixed";
fixedBox.style.left = fixedBox.parentNode.offsetLeft + "px";
}else{
fixedBox.style.position = "absolute";
window.onscroll = function(){
fixedBox.style.top = document.documentElement.scrollTop + "px";
}
}
}
</script>
</head><body>
<div class="wrap">
<div class="left-box">
<div id="left" class="box">
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
<p>left box</p>
</div>
</div>
<div class="right-box">
<div id="right" class="box">
<p>right box</p>
<p>right box</p>
<p>right box</p>
<p>right box</p>
<p>right box</p>
<p>right box</p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
<script type="text/javascript"> $(function () {
//获取要定位元素距离浏览器顶部的距离
var navH = $(".Leigl").offset().top;
//滚动条事件
$(window).scroll(function () {
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if (scroH >= navH) {
$(".Leigl").css({ "position": "fixed", "top": 0, opacity: 0.7 });
} else if (scroH < navH) {
$(".Leigl").css({ "position": "static", opacity: 1 });
}
})
});
</script>
<style type="text/css">
.Leig
{
width:100%;
height:1000px;
background: #333;
border:1px red solid;
}
.Leigl
{
width:100%;
height:100px;
background:white;
z-index:9999;
border:1px red solid;
}
</style>
</head>
<body>
<div class="Leig">
<div class="Leigl">
</div>
</div>
</body>
</div>
</html>