javascript - 水平的具有固定的第一个元素

Question

我有一个<ul/>水平设置的，包含在 a<div/>中，因此当<ul/>溢出时，您可以滚动<div/>查看其余部分。它看起来像这样：

jsFiddle

HTML：

<div>
    <ul>
        <li>HEADER</li>
        <li>Item1</li>
        <li>Item2</li>
        <!-- Additional items -->
    </ul>
</div>

CSS：

div {
    white-space:nowrap; overflow-x:scroll; width:100%;}
ul {
    list-style-type:none; }
li {
    display:inline-block; }

有没有办法<ul/>在滚动溢出时“修复”原位的第一个元素？

当其余项目滚动时，第一个元素（带有 text "HEADER"）应保持原位。我意识到可能没有“优雅”的解决方案。

我尝试仅将"HEADER"项目设置为 之外的单独元素<ul/>，但由于我将<ul/>宽度设置为100%，它会使整个<ul/>溢出浏览器窗口之外。

我用jquery标记了这个问题，因为 a) 我已经在我的应用程序中使用jquery，并且 b) 我认为元素有可能$.clone()并将其“修复”到位。这可能是答案，但我正在为具体的实现或是否有更简单的方法来实现这一点而苦苦挣扎。

Answer 1

根据您的小提琴，只需更改/添加以下 CSS：（小提琴）

ul {
    list-style-type:none;
    margin-left: 85px;
}

li:first-child {
    position: fixed;
    margin-left: -85px;
    background-color: white;
}

需要设置固定标题的背景，以便滚动li的 s 在其后面不可见。

Answer 2

这会很好，但很难移动第二个 li

li:first-child {
    position:fixed;
    width:80px;
    background-color:white;

}

因此，如果可以将标头移到 ul 之外，这是一个更简单的解决方案：

<style type="text/css">
* {
    margin:0; padding:0;
}
div {
    width:100%;
    white-space:nowrap;
    overflow-x:scroll;
    border:1px solid blue;
}
ul {
    list-style-type:none;
    position:relative;
    left:100px;
}
li {
    border:1px solid black;
    display:inline-block;
    width:80px;
}
span {
    position:fixed;
    overflow:hidden;
    width:80px;
    background-color:white;
    z-index:10;
}
</style>


<span>HEADER</span>
<div>
    <ul>
        <li>HEADER</li>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item10</li>
        <li>Item11</li>
        <li>Item12</li>
        <li>Item13</li>
        <li>Item14</li>
        <li>Item15</li>
        <li>Item16</li>
        <li>Item17</li>
        <li>Item18</li>
        <li>Item19</li>
        <li>Item20</li>
        <li>Item21</li>
        <li>Item22</li>
        <li>Item23</li>
        <li>Item24</li>
        <li>Item25</li>
        <li>Item26</li>
        <li>Item27</li>
        <li>Item28</li>
        <li>Item29</li>
        <li>Item30</li>
        <li>Item31</li>
        <li>Item32</li>
        <li>Item33</li>
        <li>Item34</li>
        <li>Item35</li>
        <li>Item36</li>
        <li>Item37</li>
        <li>Item38</li>
        <li>Item39</li>
        <li>Item40</li>
        <li>Item41</li>
        <li>Item42</li>
        <li>Item43</li>
        <li>Item44</li>
        <li>Item45</li>
        <li>Item46</li>
        <li>Item47</li>
        <li>Item48</li>
        <li>Item49</li>
        <li>Item50</li>
    </ul>
</div>

Answer 3

我想玩 position : 固定了一段时间，所以这就是我想给你的，你显然需要更多地玩它。此外，您可以在此处查看小提琴。

<div class="full">
    <div class="topdiv">
        <ul>
            <li class="fix">HEADER</li>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
            <li>Item4</li>
            <!-- Additional items -->
        </ul>
    </div>
</div>

.full{
    display : block;
    float : left;
    width : 500px;
}
.topdiv {
    width : 200px;
    overflow : auto;
}
ul {
    width : 1000px;
}
li {
    display : block;
    float : left;
    left : 300px;
    margin-left : 50px;
    margin-top : 25px;
}
.fix {
    position : fixed;
    left : 0px;
    margin-left : 0px;
    margin-top : 0px;
}