Axys Axys - 5 months ago 53
Javascript Question

Bootstrap navbar disappears when in a div where it should be always visible

Sorry for the bad title, I didn't really know how to explain it concisely.

I'm trying to make a navbar that only shows up when hovering over an icon that appears only when scrolling upwards and stays visible as long as I have my cursor over it (over the navbar or the icon).
The problem is, I want it to be always visible in the first section of the website.
It works ok when first loading it, but after scrolling down and then returning up when I hover over the navbar and then I move the cursor outside it disappears.

Here's a fiddle so you can take a look: https://jsfiddle.net/kksp9pbu/1/

Here's the 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 in case you need it:

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


And here's the jQuery code:

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

You have a function that it does something when you do scroll.

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

And you have a conditional that when it's false, this sets somthing behaviors.

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

The behavior that it's doing to hide the navbar is this:

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

You need to delete this behavior ;-)

UPDATE

Or, a better solution would be this:

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