Question

对不好的头衔抱歉，我真的不知道如何简明扼要地解释。

我正在尝试创建一个仅在将鼠标悬停在图标上时显示的导航栏，该图标仅在我向上滚动时才会显示，只要我将光标放在其上（通过导航栏或图标），就会保持可见状态。问题是，我希望它始终可以在网站的第一部分看到。首次加载时它可以正常工作，但是当我将鼠标悬停在导航栏上然后将光标移到外面时，向下滚动然后返回它会消失。

这是一个小提琴，所以你可以看看：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 {
            ...
      }

在div中，Bootstrap导航栏会消失，它应始终可见

1 个答案: