Javascript 如何切换对象并使其在滚动后永久可见？

我已经制作了一个网站，我的网站的第一页是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>

js

.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;
}

$(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:

您可以尝试此更改

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