Sticky Menu

by Amir Syarifuddin

HTML

<div id="scrollbar">
    <div id="scrollbar-bg"></div>
</div>
<header><span>Cara Membuat Sticky Menu di Blog</span><br><span class='backtutorial'><a href="http://www.amirsyarifuddin.tk/2017/08/cara-memasang-scrollbar-progress-di-blog.html">Back To Tutorial</a></span></header>
<nav class='sticky'>
  <ul>
    <li><a href="http://www.amirsyarifuddin.tk/p/sitemap_11.html">Sitemap</a></li>
    <li><a href="http://www.amirsyarifuddin.tk/search/label/Tips%20Blog?&max-results=6">Tips Blog</a></li>
    <li><a href="http://www.amirsyarifuddin.tk/search/label/Pendidikan?&max-results=6">Pendidikan</a></li>
    <li><a href="http://www.amirsyarifuddin.tk/search/label/Tips%20%26%20Trik?&max-results=6">Tips dan Trick</a></li>
  </ul>
</nav>
<div class='content'>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tempor ex, sit amet porttitor risus. Nulla est lorem, hendrerit ut diam non, consequat fringilla ex. Ut eget pulvinar eros, in cursus mi. Fusce tempor porttitor neque at euismod. Donec id ipsum quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pellentesque mi turpis, a pretium magna sagittis nec. Morbi interdum ex eu mi congue, vel iaculis nulla porttitor. Maecenas tellus augue, porttitor ac eros in, sollicitudin mollis nisl. Phasellus dignissim tristique rutrum. Nullam ligula est, tincidunt nec bibendum sodales, sollicitudin non turpis. Nulla luctus arcu a libero rhoncus, a placerat nisi ultrices. Donec eget velit eu neque vehicula consectetur ac nec leo. Nam porttitor a risus hendrerit ullamcorper. Ut porttitor consectetur sem.</p>
    <p>Nunc vitae ultrices arcu. Sed lobortis lacinia lobortis. Nam pellentesque mi nec ipsum elementum, in tempor leo scelerisque. Integer efficitur nisi non lectus rhoncus, eu vestibulum sapien auctor. Morbi venenatis ultricies bibendum. Phasellus at risus bibendum, blandit magna rutrum, porta justo. Mauris in gravida dui, at rutrum risus. Aenean efficitur...

CSS

#scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 0%;
    height: 4px;
    z-index: 9999;
}

#scrollbar-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:  #20B2AA;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
    background: #fff;
    color: #4444;
    height: 100%;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
header{
    text-align: center;
    display: block;
    background: #1E90FF;
    padding: 5% 0;
    color: #ffffff ;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 200%;
}
header span.backtutorial a {
    font-size: 61%;
    display: block;
    margin: 1em 0 0;
    color: #ffffff;
    text-decoration: none;
}
.content p {
    margin: 1em;
    padding: 0 5%;
    text-align: justify;
}
.sticky.is-active{
  position:fixed;
  top: 0;
  left: 0;
  width: 100%
}
nav.sticky{
  background: #2E8B57;
}
.sticky ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    text-align: center;
}
.sticky ul li{
  display: inline-block;
}
.sticky ul li a{
  display: block;
  padding: 0.6em 1em;
  text-decoration: navajowhite;
  color: #fafafa;
}

JavaScript

function throttle(fn, delay) {
  var last = undefined;
  var timer = undefined;

  return function () {
    var now = +new Date();

    if (last && now < last + delay) {
      clearTimeout(timer);

      timer = setTimeout(function () {
        last = now;
        fn();
      }, delay);
    } else {
      last = now;
      fn();
    }
  };
}

function onScroll() {
  if (window.pageYOffset) {
    $$html.classList.add('is-active');
  } else {
    $$html.classList.remove('is-active');
  }
}

var $$html = document.querySelector('.sticky');

window.addEventListener('scroll', throttle(onScroll,25));