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

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>
 
scroll-hide-menu

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

  • LATEST
  • RELATED
  • POPULAR