CODEWITHSUNDEEP
htmlcssposition
mpora
mpora

Reputation: 1479

dropdown styled to stick at the top not working

I have stylke a dropdown to stick at the top when the user scrolls at the bottom but it is not being consistent when I scroll down and select an item from it. Sometimes it is scrolling back at the top.

I have created this fiddle to demonstrate this:

http://jsfiddle.net/0nxvjt46/3/

<select style="position:sticky;top:0;">
    <option value="MW">Malawi</option>
    <option value="MY">Malaysia</option>
    <option value="MV">Maldives</option>
    <option value="ML">Mali</option>
    <option value="MT">Malta</option>
    <option value="MH">Marshall Islands</option>
    <option value="MQ">Martinique</option>
    <option value="MR">Mauritania</option>
    <option value="MU">Mauritius</option>
    <option value="YT">Mayotte</option>
    <option value="MX">Mexico</option>
    <option value="FM">Micronesia, Federated States of</option>
    <option value="MD">Moldova, Republic of</option>
    <option value="MC">Monaco</option>
    <option value="MN">Mongolia</option>
    <option value="ME">Montenegro</option>
    <option value="MS">Montserrat</option>
    <option value="MA">Morocco</option>
    <option value="MZ">Mozambique</option>
    <option value="ZM">Zambia</option>
    <option value="ZW">Zimbabwe</option>
</select>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor leo eu lobortis eleifend. Etiam eleifend luctus iaculis. Duis accumsan augue ipsum, in accumsan ligula ullamcorper at. Aenean tortor ex, tincidunt vitae dolor id, venenatis ullamcorper mi. Curabitur interdum turpis ut sapien mollis cursus. Praesent faucibus elit nunc, in pharetra neque tempus volutpat. Mauris eros nisi, sollicitudin at condimentum sed, vehicula posuere lorem. Curabitur ultricies quis tellus et fringilla. Donec dui metus, dapibus ut ornare vel, imperdiet a nibh. Praesent at porttitor purus, ac porta magna.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor leo eu lobortis eleifend. Etiam eleifend luctus iaculis. Duis accumsan augue ipsum, in accumsan ligula ullamcorper at. Aenean tortor ex, tincidunt vitae dolor id, venenatis ullamcorper mi. Curabitur interdum turpis ut sapien mollis cursus. Praesent faucibus elit nunc, in pharetra neque tempus volutpat. Mauris eros nisi, sollicitudin at condimentum sed, vehicula posuere lorem. Curabitur ultricies quis tellus et fringilla. Donec dui metus, dapibus ut ornare vel, imperdiet a nibh. Praesent at porttitor purus, ac porta magna.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor leo eu lobortis eleifend. Etiam eleifend luctus iaculis. Duis accumsan augue ipsum, in accumsan ligula ullamcorper at. Aenean tortor ex, tincidunt vitae dolor id, venenatis ullamcorper mi. Curabitur interdum turpis ut sapien mollis cursus. Praesent faucibus elit nunc, in pharetra neque tempus volutpat. Mauris eros nisi, sollicitudin at condimentum sed, vehicula posuere lorem. Curabitur ultricies quis tellus et fringilla. Donec dui metus, dapibus ut ornare vel, imperdiet a nibh. Praesent at porttitor purus, ac porta magna.
</p>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempor leo eu lobortis eleifend. Etiam eleifend luctus iaculis. Duis accumsan augue ipsum, in accumsan ligula ullamcorper at. Aenean tortor ex, tincidunt vitae dolor id, venenatis ullamcorper mi. Curabitur interdum turpis ut sapien mollis cursus. Praesent faucibus elit nunc, in pharetra neque tempus volutpat. Mauris eros nisi, sollicitudin at condimentum sed, vehicula posuere lorem. Curabitur ultricies quis tellus et fringilla. Donec dui metus, dapibus ut ornare vel, imperdiet a nibh. Praesent at porttitor purus, ac porta magna.
</p>

Please help.

Upvotes: 0

Views: 19

Answers (1)

Vanmarcke Software
Vanmarcke Software

Reputation: 11

try select style="position:fixed;top:0;"

Position:fixed wil keep the element fixed while scrolling

Upvotes: 1

Related Questions