Hover over top of the page for displaying menu

Question

With code below i want to realize the next idea. Now when i scroll down the page, the menu goes up with the content, but i want, for example, when i will scroll the page down, and the menu will go up, by hovering with mouse on the top of the page, to display the menu on the top. How to do this with 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>

Answer 1

you can use this style for create fixed menu

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

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

Answer 2

What i did is to set the .first position to fixed, and on scroll to hide it (opacity: 0), then when the .first:hover event happen (when the user put the cursor on top of the screen), will trigger the opacity to 1 (with important). I added z-index property to make sure nothing is not on top of it.

The code look like that:

// When the user scrolls down 300px, change opacity to 0. CSS will handle the hover
function toggleNav() {
  if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    document.getElementsByClassName("first")[0].style.opacity = "0";
  } else {
    document.getElementsByClassName("first")[0].style.opacity = "1";
  }
} 
window.onscroll = function() {toggleNav();};

.first{
display: flex;
background: red;
/* the fixed position will put it on top of the screen */
position: fixed;
top: 0;
z-index: 9;
width: 100%;
height: 45px; /* just form demonstration purpose */
font-size: 30px;  /* just form demonstration purpose */
} 
.first:hover {opacity: 1!important;}
.second{
margin-top: 50px; /* since the .first is fixed postion */
  width: 200px;
  height: 250px;
}
.container{
z-index: 8;
  display: flex;
  flex-direction: column;
}

<div class="container">
 <div class="first">
   <li>Text1</li>
   <li>Text2</li>
   <li>Text3</li>
   <li>Text4</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.
            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.
            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.
   </div>
      <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.
   </div>
      <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.
   </div>
   <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.
            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.
            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.
   </div>
      <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.
   </div>
      <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.
   </div>
    </div>
  </div>

Hope that is what you wanted. Enjoy Code!

Answer 3

Plz try this below code..

CSS

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  /* Removes padding behaviour on widths */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.first{
    display: flex;
    background:red;
}
.second{
    width: 200px;
    height: 250px;
}
.container{
    display: flex;
    flex-direction: column;
}
.first.sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
}
.first.sticky:hover {
    opacity: 1;
    transition: 0.5s all ease 0s;
    -webkit-transition: 0.5s all ease 0s;
    -moz-transition: 0.5s all ease 0s;
    -ms-transition: 0.5s all ease 0s;
}

JQUERY

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/jquery-1.11.0.min.js"><\/script>')</script>
<script>
    var firstheight = jQuery('.first').outerHeight();
    $(window).scroll(function(){
        if ($(window).scrollTop() >= firstheight) {
            jQuery('.first').addClass("sticky");
            jQuery('.first').next().css("margin-top",firstheight);
        }
        else {
            jQuery('.first').removeClass("sticky");
            jQuery('.first').next().css("margin-top","0px");
        }
    });
</script>