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

Sticky-Menuはウェブサイトにスティッキーメニューを組み込むjQueryプラグイン。
<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>
<div class="menu"> <a href="#home">Home</a> <a href="#usage">Usage</a> </div>
.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; }
$(function(){ $(window).scroll(function() { if ($(this).scrollTop() >= window.innerHeight - 100) { $(".menu").addClass("active"); } else { $(".menu").removeClass("active"); } }); });