【jQuery】jQueryを使ったスティッキープラグインSticky-Menu

Sticky-Menuはウェブサイトにスティッキーメニューを組み込むjQueryプラグイン。

JS/CSS

<link rel="stylesheet" href="http://www.sticky-menu.ml/css/lib/stickymenu.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.sticky-menu.ml/js/lib/stickymenu.min.js"></script>

HTML

<div class="menu">
<a href="#home">Home</a>
<a href="#usage">Usage</a>
</div>

CSS

.menu {
background: white;
height: 100px;
width: 100%;
position: absolute;
top: calc(100vh - 100px);
left: 0;
line-height: 100px;
text-align: center;
display: flex;
cursor: pointer;
justify-content: space-around;
}
.menu:hover {
opacity: 1;
}
.menu a {
color: black;
font-family: Quicksand;
text-decoration: none;
font-weight: bold;   
font-size: calc(2vh + 10px);
}
.active {
top: 0;
opacity: 0.5;
position: fixed;
z-index: 9999;    
-webkit-transition: opacity .55s;
-moz-transition: opacity .55s;
-o-transition: opacity .55s;
transition: opacity .55s;
}

JS/jQuery

$(function(){
$(window).scroll(function() {
if ($(this).scrollTop() >= window.innerHeight - 100) {
$(".menu").addClass("active");
}
else {
$(".menu").removeClass("active");
}
});
});
 
Sticky-Menu

【jQuery】jQueryを使ったスティッキープラグインSticky-Menu

  • LATEST
  • RELATED
  • POPULAR