当用户在底部滚动时，我设计了一个下拉菜单以固定在顶部，但当我向下滚动并从中选择一个元素时，它并不一致。有时它会在顶部向后滚动。
我创建了这个 fiddle 来演示这一点:
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>
请帮忙。
最佳答案
试试select style="position:fixed;top:0;"
Position:fixed 将在滚动时保持元素固定
关于html - 下拉样式停留在顶部不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51776280/