пытаясь заморозить левую колонку - PullRequest
Новая
       1

пытаясь заморозить левую колонку

0 голосов
/ 15 января 2010

Я бы хотел, чтобы левая колонка была исправлена ​​при прокрутке вправо.

Вот мой код, спасибо.таблица css 

<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>&nbsp</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</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>

Ответы [ 2 ]

4 голосов
/ 15 января 2010 
 position:fixed;
0 голосов
/ 15 января 2010

Если вы хотите, чтобы он работал в IE6, и, следовательно, не хотите использовать position: fixed, вам следует рассмотреть возможность использования плагина jquery scrollFollow. Вы можете найти его здесь:

http://kitchen.net -perspective.com / с открытым исходным кодом / прокрутка следуйте /

Удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...