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

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

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

How do I toggle an object and make it permanently visible after scrolling?

javascript

jquery

toggle

visibility