Horizontal with fixed first element

Question

I have a <ul/> that is set up horizontally, and is contained within a <div/> so that when the <ul/> overflows, you can scroll the <div/> to see the rest. It looks something like this:

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; }

Is there a way to "fix" the first element of the <ul/> in place while scrolling the overflow?

The first element (with the text "HEADER") should stay in place while the rest of the items scroll. I realize there may not be an "elegant" solution for this.

I tried just making the "HEADER" item a separate element outside of the <ul/>, but since I have the <ul/> width set to 100%, it makes the entire <ul/> overflow outside the browser window.

I tagged the question with jquery because a) I'm already using jquery in my application, and b) I think that it might be possible to $.clone() the element and "fix" it in place. That may be the answer, but I'm struggling with the specific implementation or whether there is a simpler way to accomplish this.

Answer 1

Based on your fiddle, just change/add the following CSS: (Fiddle)

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

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

The background on the fixed header needs to be set so the scrolled lis aren't visible behind it.

Answer 2

I wanted to play with position : fixed for a while now, so here is what I came up with for you, you'll obviously need to play around with it more. Also, you can look at the fiddle here.

<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;
}

Answer 3

this would be nice but gets hard to move the seccond li

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

}

so if it is possible to move the header outside of the ul this is an easyer solution:

<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>