【jQuery】スクロールダウンすると非表示/スクロールアップすると表示されるScroll Hide Menu

jQuery

scroll-hide-menu

July 14, 2016

scroll-hide-menuはヘッダーに固定されているメニューがスクロールダウンすると隠れていき、スクロールアップすると表示されるjQueryプラグイン。

JS

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=4.3.3'></script>
<script type='text/javascript' src='js/menu.js'></script>

CSS

#menu {
		
   	background-color: #333;
   	color: #fff;
	position: fixed;
 	z-index: 1000;
	display: block; 
  	top: 0;
  	left: 0;
  	width: 100%;
  	padding: 30px;
  	text-align: center;
	overflow:hidden;
    -webkit-transition: 500ms all ease-in-out;
	-moz-transition: 500ms all ease-in-out;
	-ms-transition: 500ms all ease-in-out;
	-o-transition: 500ms all ease-in-out;
}

.menu-close {	
	-moz-transform: translateY(-100%);
   	 -ms-transform: translateY(-100%);
   	 -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
	opacity: 0; 

}

#content {
	margin-top: 120px;
	max-width: 700px;
	margin-left: 40px;
	margin-bottom: 80px;
}

HTML

<div id="menu" class="menu-min">Menu</div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales tortor mauris.....
</div>

Latest Posts

Related Posts