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

Question

我有一个 <ul/>水平设置，包含在 <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/> 的第一个元素？滚动溢出时就位？

第一个元素(带有文本 "HEADER" )应该留在原地，而其余项目滚动。我意识到可能没有一个“优雅”的解决方案。

我试过制作 "HEADER" item <ul/> 之外的单独元素, 但因为我有 <ul/>宽度设置为 100% , 它使整个 <ul/>溢出到浏览器窗口之外。

我用 jquery 标记了问题因为 a) 我已经在使用 jquery在我的申请中，并且 b) 我认为有可能 $.clone()元素并将其“固定”到位。这可能是答案，但我正在努力解决具体的实现问题，或者是否有更简单的方法来实现这一点。

Answer 1

根据您的 fiddle ，只需更改/添加以下 CSS:( Fiddle )

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

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

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