时间戳

首页 > 解决方案 > 悬停在页面顶部以显示菜单

javascript - 悬停在页面顶部以显示菜单

问题描述

通过下面的代码，我想实现下一个想法。现在，当我向下滚动页面时，菜单会随内容一起上升，但我希望，例如，当我向下滚动页面时，菜单会上升，通过将鼠标悬停在页面顶部，在顶部显示菜单。如何用javascript做到这一点？

.first{
		display: flex;
    background:red;
	}
	.second{
		width: 200px;
		height: 250px;
	}
.container{
	display: flex;
	flex-direction: column;
}
<div class="container">
		<div class="first">
			<li>fff</li>
			<li>fff</li>
			<li>ff</li>
			<li>fff</li></div>
		<div class="second">
			<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis reiciendis, rem. Aspernatur cumque
			     eveniet id illum iusto laboriosam, laudantium maxime modi nam nemo nisi nobis optio possimus ratione
			     sit totam.
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			</div>
			<div>Ad cum cumque dolores odio quos sequi tenetur! Aliquid cupiditate facilis fugiat, impedit iste labore
			     libero modi necessitatibus nulla rerum soluta, suscipit. Aliquid culpa, eveniet molestias provident
			     reiciendis tempore velit!
			</div>
			<div>Cumque dolorum id natus. A alias aliquid culpa cum eaque earum harum, iusto natus nihil odit optio
			     pariatur, repellat veritatis? Corporis expedita magni non numquam recusandae sed sunt suscipit velit?
			</div>
			<div>Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			     Adipisci at cum doloribus eaque eius enim molestiae perspiciatis quod ratione repellendus sint
			     temporibus, ut veniam. Aut commodi debitis delectus dolor dolorem magni molestiae mollitia odit sit
			     voluptatem? Dolor, doloribus?
			</div>
		</div>
	</div>

标签： javascripthtmlcss

解决方案

您可以使用此样式创建固定菜单

.first{
    display: flex;
    background: red;
    position: fixed;
    width: 100%;
    top: 5px;
    }

.container{
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 20px;
}

推荐阅读