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

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

1 个答案: