trying to freeze the left column
I would like the left column fixed when I scroll to the right.
Here is my code, thanks. css table
<script type="text/javascript">
$(function()
{
//alert("testme");
//$('#addScroll').jScrollPane();
//$('#addScroll').scrollTo(150, 800 );
});
function show() {
//alert("test");
var shDiv = document.getElementById("thisOne").style.display;
if(shDiv == "none")
{
document.getElementById("thisOne").style.display='block';
}
else{
document.getElementById("thisOne").style.display='none';
}
//document.getElementById("noe").style.display='none';
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0
}
.container {
background-color: #FFFFCC;
width: 1560px;
border: 1px solid #000;
}
* html .container {
width: 762px;
}
.header {
width: 1560px;
border-bottom: 1px solid #000;
}
.header ul {
list-style: none
}
.header ul li {
width: 150px;
border-left: 1px solid #000;
float: left;
font-weight: bold;
padding-left: 2px;
}
* html .header ul li {
width: 151px;
}
.data {
width: 150px;
float: left;
padding-left: 2px;
border-left: 1px solid #000;
}
.subColumn {
width: 150px;
float: left;
padding-left: 0px;
border-right: 1px solid #000;
}
.subData {
width: 150px;
float: left;
padding-left: 2px;
border-right: 1px solid #000;
}
* html .data {
width: 152px;
}
.rowodd,.roweven {
position: relative;
width: 1560px;
border-top: 1px solid #000;
background-color: #E8E8E8;
}
.roweven {
background-color: #D1DCE9;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
</style>
</head>
<body>
<div style="overflow-y:hidden;overflow-x:scroll">
<div class="container clearfix">
<div class="header clearfix">
<ul>
<li> </li>
<li>QMPlus</li>
<li>WHAT</li>
<li>ICFWiz</li>
<li>QM</li>
<li>ToolBar</li>
<li>DIBWiz</li>
<li>RZWiz</li>
<li>ARCH</li>
<li>ToolBar</li>
</ul>
</div>
<div style="overflow-y:scroll;overflow-x:hidden">
<div class="rowodd clearfix">
<div class="data">
<p>Total <a href="#" onclick="show();">+</a></p>
<div class="roweven clearfix" id="thisOne" style="display:none">
<div class="subColumn">
Area 1
</div>
<div class="subData"><p>Netflix</p></div>
<div class="subData"><p>BlockBuster</p></div>
<div class="subData"><p>Vudu开发者_StackOverflow中文版</p></div>
<div class="subData"><p>Cine</p></div>
<div class="subData"><p>PS3</p></div>
<div class="subData"><p>boxee</p></div>
<div class="subData"><p>AppleTv</p></div>
enter code here<div class="subData"><p>PS3</p></div>
</div>
</div>
<div class="data"><p>Boxee</p></div>
<div class="data"><p>1</p></div>
<div class="data"><p>24</p></div>
<div class="data"><p>45</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
<div class="data"><p>boxee</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
</div>
<div class="roweven clearfix">
<div class="data">
<p>Chicago</p>
</div>
<div class="data"><p>1</p></div>
<div class="data"><p>3</p></div>
<div class="data"><p>test</p></div>
<div class="data"><p>place</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
<div class="data"><p>boxee</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
</div>
<div class="rowodd clearfix">
<div class="data">
<p>New York</p>
</div>
<div class="data"><p>2</p></div>
<div class="data"><p>0</p></div>
<div class="data"><p>why</p></div>
<div class="data"><p>google</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
<div class="data"><p>boxee</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
</div>
<div class="rowodd clearfix">
<div class="data">
<p>Atlanta</p>
</div>
<div class="data"><p>2</p></div>
<div class="data"><p>0</p></div>
<div class="data"><p>where</p></div>
<div class="data"><p>go</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
<div class="data"><p>boxee</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
</div>
<div class="rowodd clearfix">
<div class="data">
<p>Boston</p>
</div>
<div class="data"><p>2</p></div>
<div class="data"><p>0</p></div>
<div class="data"><p>test1</p></div>
<div class="data"><p>play</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
<div class="data"><p>boxee</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
</div>
<div class="rowodd clearfix">
<div class="data">
<p>Phil</p>
</div>
<div class="data"><p>2</p></div>
<div class="data"><p>0</p></div>
<div class="data"><p>xbox</p></div>
<div class="data"><p>boxee</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
<div class="data"><p>boxee</p></div>
<div class="data"><p>AppleTv</p></div>
<div class="data"><p>PS3</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
position:fixed;
If you want it to work in IE6, and therefore don't want to use position:fixed, you should consider using the jquery plugin scrollFollow. You can find it here:
http://kitchen.net-perspective.com/open-source/scroll-follow/
Good luck!
加载中,请稍侯......
精彩评论