将鼠标悬停在页面顶部以显示菜单

Question

使用下面的代码，我想实现下一个想法。现在，当我向下滚动页面时，菜单会随内容一起上升，但我想要，例如，当我将页面向下滚动时，菜单将上升，通过将鼠标悬停在页面顶部，以在顶部显示菜单。如何用 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>

    </div>

  </div>

Answer 1

您可以使用此样式创建固定菜单.first{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; background: red;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; top: 5px;&nbsp; &nbsp; }.container{&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; padding-top: 20px;}