navi_small_mobile

by bvotcode

HTML

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div id="navigation">
  <ul class="menu">
    <li class="first leaf news">
      <a href="#news" title="" class="scroll-to-anchor" data-scroll-offset="0">News</a>
    </li>
    <li class="leaf tour">
      <a href="#tour" title="" class="scroll-to-anchor" data-scroll-offset="0">Tour</a>
    </li>
    <li class="leaf video">
      <a href="#video" title="" class="scroll-to-anchor" data-scroll-offset="0">Video</a>
    </li>
    <li class="leaf music">
      <a href="#music" title="" class="scroll-to-anchor" data-scroll-offset="0">Music</a>
    </li>
    <li class="leaf photo">
      <a href="#photo" title="" class="scroll-to-anchor" data-scroll-offset="0">Photo</a>
    </li>
    <li class="leaf album last">
      <a href="#album" title="" class="scroll-to-anchor" data-scroll-offset="0">Album</a>
    </li>
  </ul>
</div>
<div id="content">
  <div id="news" class="scroll-watcher-item">
    News
  </div>
  <div id="tour" class="scroll-watcher-item">
    Tour
  </div>
  <div id="video" class="scroll-watcher-item">
    Video
  </div>
  <div id="music" class="scroll-watcher-item">
    Music
  </div>
  <div id="photo" class="scroll-watcher-item">
    Photo
  </div>
  <div id="album" class="scroll-watcher-item">
    Album
  </div>
</div>

<div id="footer">
  <div class="footer-tos">
    <a href="" target="_blank">Privacy Policy</a> | <a href="" target="_blank">Terms of Service</a>
  </div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</html>

CSS

body {
  background: none #000;
  margin: 0;
}

.logo {
  text-transform: uppercase;
  color: burlywood;
  text-align: center;
  font-size: 3vw;
  font-family: cursive;
  height: 90vh;
}

.sticky .logo {
  height: 0;
}

ul.menu {
  text-align: center;
  list-style-type: none;
  margin: 0;
  padding: 2vh 0;
}

.sticky ul.menu {
  padding: 1vh 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: none #000;
}

ul.menu li {
  display: inline-block;
  vertical-align: middle;
  list-style-type: none;
  margin: 0 1vw;
}

ul.menu li.last {
  margin: 0;
}

ul.menu li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.5vw;
  font-family: cursive;
  opacity: 1;
  padding: 0 1vw;
}

ul.menu li a:hover {
  opacity: 0.6;
}

ul.menu li.news a {
  color: #36d341;
}

ul.menu li.tour a {
  color: #ff25e8;
}

ul.menu li.video a {
  color: #7353ff;
}

ul.menu li.music a {
  color: #3dc6ff;
}

ul.menu li.photo a {
  color: #ecee24;
}

ul.menu li.album a {
  color: #fa6d27;
}

ul.menu li a.active {
  background: red;
  color: #fff;
}

#content>div {
  padding: 45vh 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 2vw;
  font-family: monospace;
}

#content #news {
  background: -moz-linear-gradient(-34deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
  background: -webkit-linear-gradient(-34deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
  background: -o-linear-gradient(-34deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
  background: -ms-linear-gradient(-34deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
  background: linear-gradient(124deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
}

#content #tour {
  background: -moz-linear-gradient(-34deg, #ecee24 0%, #EC4e24 50%, #fa6d27 100%);
  background: -webkit-linear-gradient(-34deg, #ecee24 0%, #EC4e24 50%, #fa6d27 100%);
  background: -o-linear-gradient(-34deg, #ecee24 0%, #EC4e24 50%, #fa6d27 100%);
  background: -ms-linear-gradient(-34deg, #ecee24 0%, #EC4e24 50%, #fa6d27 100%);
  background:...

JavaScript

jQuery(window).bind('scroll', function() {
  var navHeight = jQuery('ul.menu').height();
  if (jQuery(window).scrollTop() > navHeight) {
    jQuery('body').addClass('sticky');
  } else {
    jQuery('body').removeClass('sticky');
  }
});


// Scroll watcher

function getViewportHeight() {
  return window.innerHeight || document.documentElement.clientHeight;
}

function scrollWatch() {
  let elements = document.querySelectorAll(".scroll-watcher-item");
  if (!elements) {
    return;
  }
  [].forEach.call(elements, function(element) {
    scrollWatchElement(element);
  });
  scrollWatch__UpdateActiveMenuItem();
}

function scrollWatch__UpdateActiveMenuItem() {
  let menu_items = document.querySelectorAll("#navigation a");
  if (!menu_items) {
    return;
  }
  [].forEach.call(menu_items, function(item) {
    item.classList.remove("active");
  });
  let elements = document.querySelectorAll(".scroll-watcher-item");
  if (!elements) {
    return;
  }
  let active_expectant = null;
  let active_expectant_percent = 0;
  [].forEach.call(elements, function(element) {
    let percent = parseFloat(element.getAttribute("data-watcher-percent"));
    if (percent > active_expectant_percent) {
      active_expectant = element;
      active_expectant_percent = percent;
    }
  });
  if (!active_expectant) {
    return;
  }
  let active_menu_item_id = active_expectant.getAttribute("id");
  let active_menu_item = document.querySelector('#navigation a[href="#' + active_menu_item_id + '"]');
  if (!active_menu_item) {
    return;
  }
  active_menu_item.classList.add("active");
}

function scrollWatchElement(element) {
  let viewportHeight = getViewportHeight();
  if (!element) {
    return;
  }
  let rect = element.getBoundingClientRect();
  let top = rect.top;
  if (top < 0) top = 0;
  if (top > viewportHeight) top = viewportHeight;
  let bottom = rect.bottom;
  if (bottom < 0) bottom = 0;
  if (bottom > viewportHeight) bottom = viewportHeight;
  let percent = Math.round((100 *...