如何在滾動後切換對象並使其永久可見？

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')) 
}) 
} 
}); 

我這裏有一個〔實施例：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') 
     } 
    });