Как переключить объект и сделать его навсегда видимым после прокрутки?

Question

Я создал сайт, на котором первая страница моего сайта представляет собой видео с YouTube, я хочу, чтобы навигационная панель была скрыта до тех пор, пока вы не нависете над ней. Когда вы перейдете на другой сайт, я хочу, чтобы панель навигации была видимой во все времена. На данный момент панель навигации исчезает, когда вы наводите ее на другие страницы сайта.

Это мой код для панели навигации:

HTML:

<div class="navbar"> 
    <nav> 
     <ul> 
      <span class="toc-button" id="Block1-button">front page</span> 
      <span class="toc-button" id="Block2-button">2nd page</span> 
      <span class="toc-button" id="Block3-button">3rd page</span> 
      <span class="toc-button" id="Block4-button">4th page</span> 
     </ul> 
    </nav> 
</div> 

CSS

.navbar { 
background-color:rgba(213,213,213,0.7); 
display: block; 
position: fixed; 
top: 0; 
margin: auto; 
width: 100%; 
text-align: center; 
font-family: 'Georgia'; 
font-size: 1em; 
list-style-type: none; 
-webkit-transition: opacity 0.5s ease-in-out; 
-moz-transition: opacity 0.5s ease-in-out; 
-ms-transition: opacity 0.5s ease-in-out; 
-o-transition: opacity 0.5s ease-in-out; 
transition: opacity 0.5s ease-in-out; 
} 
.navbar ul span:hover{ 
    color: white; 
    cursor:pointer; 
} 
.navbar.hidenav{ 
    opacity:0; 
} 

JS

$(document).ready(function() { 

$(function() { 
$('.navbar').addClass('hidenav'); 
}); 

$(window).scroll(function() {  
var scroll = $(window).scrollTop(); 

if (scroll > 300) { 
$(".navbar").removeClass("hidenav") 
}else{ 
$('.navbar').hover(function() { 
($('.navbar').toggleClass('hidenav')) 
}) 
} 
}); 

У меня есть exmaple здесь: www.skmo.nu/test

Answer 1

вы можете попробовать это меняет

// hover to show navbar 
    $('.navbar').hover(function() { 
     if (!$(window).scrollTop()) { 
      ($('.navbar').toggleClass('hidenav')) 
     } 
    }); 
    // show navbar after scrolling 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 
     if (scroll) { 
      $(".navbar").removeClass("hidenav") 
     } else { 
      $('.navbar').addClass('hidenav') 
     } 
    });