Держите меню постепенного появления / исчезновения видимым при наведении

Question

У меня есть главное меню, которое исчезает, когда я прокручиваю, и исчезает, когда я не делаю. Когда я не прокручиваю, он остается видимым в течение 1300 мсек, и в течение этого времени я хочу, чтобы он оставался видимым в случае, если я наведусь на него.

Бит затухания на прокрутке работает нормально, но он не остается видимым, если я наведу на него курсор.

Это мой код:

$(function() {
  
 $(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  if (scrollTop > 150) {
   $('#top').fadeIn(400);
   clearTimeout($.data(this, 'scrollTimer'));
   $.data(this, 'scrollTimer', setTimeout(function () {
    $('#top').fadeOut(400);
   }, 1300));
  }else{

   clearTimeout($.data(this, 'scrollTimer'));
   $('#top').fadeOut(400);
  }

  $('#top').hover(
   function (e) {
    var scrollTop = $(window).scrollTop();
    if(scrollTop != 0){
     $('#top').stop().animate({'opacity':'1'},400);
    }
   },
   function (e) {
    var scrollTop = $(window).scrollTop();
    if(scrollTop != 0){
     $('#top').stop().animate({'opacity':'0.2'},400);
    }
   }
  );
 });
  
});

body {height:3000px;}
ul, li {
 list-style-type: none;
 list-style: none;
  text-decoration: none;
}
#top, #topStatic {
 height:5%;
 width: 92%;
 max-width:1150px;
 background:gray;
 top: 0;
 left:0;
 right:0;
 box-sizing: border-box;
 margin: 0 auto;
}
#top {
 position: fixed; 
 z-index:9999; 
}
#top ul {
 width:440px;
 margin:0 auto;
 height:100%;
}
#top li {
 float: left;
 padding: 2% 10px;
}
#top li:hover {
 background-color: #D9D9D9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="top" class="marginLeft">
   <ul>   
    <li><a href="#">home</a></li>
    <li><a href="#aboutus">about us</a></li>        
    <li><a href="#projects">projects</a></li>  
    <li><a href="#contact">contact</a></li>         
   </ul>    
  </nav>

Любая помощь высоко ценится!

Answer 1

Я изменил ваш сценарий, чтобы иметь scrollTimer в глобальном масштабе.
Таким образом, он может быть установлен или очищен легче.

Я использовал функции, чтобы избежать слишком большого количества повторяющегося кода.

Посмотри!
;)

$(function() {
 
  var scrollTimer;
  
  function setTimer(){
    scrollTimer = setTimeout(function () {
      $('#top').fadeOut(400);
    }, 1300);
  }
  function clearTimer(){
    clearTimeout(scrollTimer);
  }
  
  
  $(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > 150) {
      $('#top').fadeIn(400);
      clearTimer();
      setTimer();
    }

    $('#top').hover(
      function (e) {
        clearTimer();
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0){
          $('#top').stop().animate({'opacity':'1'},400);
        }
      },
      function (e) {
        var scrollTop = $(window).scrollTop();
        if(scrollTop != 0){
          setTimer();
        }
      }
    );
  });
    
});

body {height:3000px;}
ul, li {
  list-style-type: none;
  list-style: none;
  text-decoration: none;
}
#top, #topStatic {
  height:5%;
  width: 92%;
  max-width:1150px;
  background:gray;
  top: 0;
  left:0;
  right:0;
  box-sizing: border-box;
  margin: 0 auto;
}
#top {
  position: fixed;  
  z-index:9999;  
}
#top ul {
  width:440px;
  margin:0 auto;
  height:100%;
}
#top li {
  float: left;
  padding: 2% 10px;
}
#top li:hover {
  background-color: #D9D9D9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="top" class="marginLeft">
  <ul>   
    <li><a href="#">home</a></li>
    <li><a href="#aboutus">about us</a></li>        
    <li><a href="#projects">projects</a></li>  
    <li><a href="#contact">contact</a></li>         
  </ul>    
</nav>