jQuery

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

July 28, 2016

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");
          }
      });
  });

Demo/Download