javascript - Bootstrap 导航栏在 div 中时消失，它应该始终可见

Question

抱歉，标题不好，我真的不知道如何简洁地解释它。

我正在尝试制作一个导航栏，该导航栏仅在将鼠标悬停在仅在向上滚动时出现的图标上时显示，并且只要我将光标悬停在该图标上(在导航栏或图标上)，该导航栏就会保持可见。 问题是，我希望它始终在网站的第一部分中可见。 第一次加载时它工作正常，但是向下滚动然后当我将鼠标悬停在导航栏上然后将光标移到外面时返回它会消失。

这是一个 fiddle ，您可以看一下:https://jsfiddle.net/kksp9pbu/1/

这是 HTML:

<div id="menu-trigger" class="hidden-menu trigger"><i class="fa fa-bars"></i></div>
 <nav class="navbar navbar-default navbar-fixed-top" id="main-nav">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
     </nav>
<main>
<section class="container-fluid">
    <div class="row">
        <div class="col-xs-12" id="header">
            <h1>The navbar should always be visible here</h1>
        </div>
    </div>
</section>
<section class="container-fluid">
    <div class="row" id="about">
        <div id="about-l"><h3>About</h3></div>
    </div>
</section>
<section class="container-fluid">
    <div class="row" id="portfolio">
        <div id="about-l"><h3>Portfolio</h3></div>
    </div>
</section>

CSS，以防您需要:

#menu-trigger {
    position: fixed;
    top: 15px;
    height: 40px;
    right: 20px;
    z-index:1;
    cursor: pointer;
}

.fa-bars{
    color: #fff
}

#main-nav {
    height: 70px;
    background-color: rgba(0, 119, 124, 0.46);
    border-bottom: 3px solid #111;
}

.navbar-fixed-top {
    top:0px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.hidden-nav {
    top:-75px !important;
}

.trigger {
    opacity: 1;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.hidden-menu {
    opacity: 0;
}

#main-nav a:link,
#main-nav a:visited {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
}

.navbar-nav {
    margin-left: 80px;
}

.navbar-nav li {
    padding: 30px 0 0 100px;
}

.navbar-nav>li>a {
    padding: 0 0 5px 0 !important;
    color: #fff !important;
}

.navbar-nav a:hover,
.navbar-nav a:active {
    border-bottom: 1px solid #333;
}

.navbar-brand {
    transition: color 0.2s ease;
    color: #fff!important;
    font-size: 2em !important;
    font-weight: 100 !important;
}
.navbar-brand:hover {
    color: #ffb100 !important;
}



/*----HEADER----*/

#header {
    text-align: center;
    height: 100vh;
    background-color: #333;
    background-color: #333;
    color: #fff;
    padding-top: 15%;
}
#header h1 {
    font-size: 2.8em;
    font-weight: 100;
}


/*----ABOUT----*/
#about{
height:100vh;
background-color:#39bebe;
}

#portfolio{
height:100vh;
background-color:#009eee;
}

这是 jQuery 代码:

$(document).ready(function(){

var lastScrollTop = 0;

$(window).scroll(function(event) {   

    var scroll = $(window).scrollTop();
    var aboutOffset=$("#about").offset().top;

    if(scroll<=aboutOffset){ // if I haven't reached #about section yet
        $("#main-nav").removeClass("hidden-nav"); 
    } else {
       $("#main-nav").addClass("hidden-nav"); //hide the navbar


         function hideIt(){
             $("#menu-trigger").addClass("hidden-menu"); //hide the trigger
         };

        if (scroll > lastScrollTop){ //scrolling down
            setTimeout(hideIt, 2000);
        } else {
            $("#menu-trigger").removeClass("hidden-menu"); 
        }
        lastScrollTop = scroll;

        $("#menu-trigger, #main-nav").on("mouseover", function(){ //if I hover over the trigger or the navbar
           $("#main-nav").removeClass("hidden-nav"); // I leave the navbar visible
        });

        $("#menu-trigger, #main-nav").on("mouseout", function(){ //if I move the cursor out of the trigger or the navbar
           $("#main-nav").addClass("hidden-nav"); // hide the navbar
        });

    }


}); // END $(window).scroll();


}); //END $(document).ready();

Answer 1

你有一个函数，当你滚动时它会执行一些操作。

$(window).scroll(function(event) { 
...
}

你有一个条件，当它为假时，这会设置一些行为。

       if(scroll<=aboutOffset){
            $("#main-nav").removeClass("hidden-nav"); 
        } else {
            ...
        }

隐藏导航栏的行为是这样的:

           $("#menu-trigger, #main-nav").on("mouseout", function(){ 
               $("#main-nav").addClass("hidden-nav");
            });

您需要删除此行为;-)

更新

或者，更好的解决方案是这样的:

      if(scroll<=aboutOffset){
            $("#main-nav").removeClass("hidden-nav"); 
            $("#menu-trigger, #main-nav").off("mouseout");
      } else {
            ...
      }