隐藏在滚动上的导航并在徽标悬停上重新启动它?

时间:2015-11-03 15:17:40

标签: javascript html nav

我正在开发一个网站,我即将添加一些过渡到导航栏,但我有几个bug可以帮助。

目标是当您向下滚动导航元素被隐藏并且网站的徽标将位于固定位置时,如果您移动悬停徽标,导航将再次出现。

我认为还需要修复。

参考导航栏:https://www.barackobama.com/



.logo{
	position: fixed;
	}
.navigation{
	position: fixed;
	margin: 50px 20px;
	display: block;
	}
ul li{
	padding: 0 30px;
	display: inline-block;
	}
ul li a{
	color: #646464;
	text-transform: uppercase;
	font-weight: 600;
	}
ul li a:hover{
	color: #BE9503;
	text-decoration: none;
	}
.main{
	min-height: 1200px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navig" id="navhome">
  <div class="logo">
    <img src="images/logo-4.png" width="70">
  </div>
   <nav id="navMain" class="navMain">
  <ul class="navigation">
    <li><a href="#">Dr Ganesh</a></li>
    <li><a href="#">Connect</a></li>
    <li><a href="#">Achievers</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Gallery</a></li>
  </ul>
</nav>
</div>
<div class="main"></div>
<script type="text/javascript">
  $(window).scroll(function(){
	  if($(this).scrollTop()>100)
	   {
		   $('.navMain').fadeOut();
	   }
		  else
		   {
			  $('.navMain').fadeIn(); 
			   }
       $('.navig').mouseenter(function(){
		   $('.navMain').show();
		   });
		$('.navig').mouseleave(function(){
		   $('.navMain').hide();
		   });
		
	  });
</script>

</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案