Question

当用户滚动到底部时，我有一个下拉菜单可以停留在顶部，但是当我向下滚动并从中选择一个项目时，下拉菜单并不一致。有时它会在顶部滚动回去。

我创建了这个小提琴来演示这一点：

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

请帮助。

Answer 1

尝试选择样式=“ position：fixed ; top：0;”

位置：固定将在滚动时保持元素固定

下拉式样式停留在顶部不起作用

1 个答案: