CODEWITHSUNDEEP
javascriptjqueryhtml
stinkysGTI
stinkysGTI

Reputation: 611

jQuery - hide/show footer navigation by cursor position

What I'm trying to do is have a small navigation menu at the bottom of the window that only displays when the cursor position is near the bottom. I'm able to get it to show, but not hide again. I've tried mouseleave, mouseout and an if, but can't quite get it to work. Here's what I have until I get stuck:

	$(document).mousemove(function(e) {
	  var cursorPosition = e.pageY - $(window).scrollTop();
	  var windowHeight = $(window).height() - 60;

	  if (cursorPosition >= windowHeight) {
	    $('#thumbnail-nav').animate({
	      bottom: '-20px'
	    }, 500);
	  }
	});
#thumbnail-nav {
  position: fixed;
  height: 110px;
  bottom: -150px;
  padding: 10px 15px;
  width: 50%;
  left: calc(50% - 25%);
  background: rgba(0, 0, 0, .8);
  border-radius: 5px 5px 0 0;
  display: -webkit-flex;
  display: flex;
}
#thumbnail-nav li {
  display: inline-block;
  text-align: center;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
<ul id="thumbnail-nav">
  <li>
    <a href="">
      <img src="http://placehold.it/100x100" alt="" />
    </a>
  </li>
  <li>
    <a href="">
      <img src="http://placehold.it/100x100" alt="" />
    </a>
  </li>
  <li>
    <a href="">
      <img src="http://placehold.it/100x100" alt="" />
    </a>
  </li>
</ul>

Here is a fiddle.

Could someone give me a little direction on this?

Upvotes: 0

Views: 198

Answers (2)

Alexander Dayan
Alexander Dayan

Reputation: 2924

You can do it even better with CSS only:

#thumb-nav-hldr{
    display: block;
	position: fixed;
    width: 100%;
	height:130px;
	bottom:-130px;
    padding-top: 60px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;    
}
#thumb-nav-hldr:hover{
    padding-top: 0;
    bottom:0px;
}
#thumbnail-nav {
    margin: 0 auto;
    height:110px;
	padding: 10px 15px;
	width:50%;
	left:calc(50% - 25%);
	background:rgba(0,0,0,.8);
	border-radius:5px 5px 0 0;
    display:-webkit-flex;
    display:flex;
	}
	#thumbnail-nav li {
		display:inline-block;
        text-align:center;
        -webkit-flex:1;
        -ms-flex:1;
        flex:1;
		}
<div id='thumb-nav-hldr'>
    <ul id="thumbnail-nav">
	    <li><a href=""><img src="http://placehold.it/100x100" alt="" /></a></li>
	    <li><a href=""><img src="http://placehold.it/100x100" alt="" /></a></li>
	    <li><a href=""><img src="http://placehold.it/100x100" alt="" /></a></li>
    </ul>
<div>

Upvotes: 1

abaracedo
abaracedo

Reputation: 1454

I'm not an expert with that kind of problems but i think that i found a little solution that can help you.

The solution is using a boolean variable (flag). When it shows the navigation menu you change the value to true, and when you leave it, you change it to false.

Here is your code with the changes:

var showNavMenu = false; // The flag variable set to false because menu is hidden

$(document).mousemove(function(e){
        var cursorPosition = e.pageY - $(window).scrollTop();
        var windowHeight = $(window).height() - 60;

        if(cursorPosition >= 232){

            if (flag === false) { 
                flag = true;
                $('#thumbnail-nav').animate({bottom:'-20px'},500);
            }

        } else {

            if (flag === true) {
                $('#thumbnail-nav').animate({bottom:'-150px'},500);
                flag = false;
            }
        }
    });

The if statements checks the value of the flag to show/hide the nav menu.

Upvotes: 1

Related Questions