<script type="text/javascript">
(function() {
  'use strict'

  document.addEventListener('DOMContentLoaded', function () {
    window.addEventListener('scroll', function () {
      var scrolled = window.pageYOffset || document.documentElement.scrollTop
      var navObject = document.querySelector('#nav')
      var navActiveClass = 'navbar--fixed'
      var offsetTop = parseInt(navObject.dataset.fixat) || 500
      if (scrolled > offsetTop) {
        navObject.classList.add(navActiveClass)
      } else {
        navObject.classList.remove(navActiveClass)
      }
    })
  })

}())
</script>

<nav class="navbar" id="navbar" data-fixat="300">
	<ul class="navbar__list">
		<li class="navbar__item">item 1</li>
		<li class="navbar__item">item 2</li>
		<li class="navbar__item">item 3</li>
	</ul>
</nav>