JSFiddle - React, Tailwind, and code Playground

by marcolepsy

HTML

<nav hide-show-nav ng-class="{'fixed-nav':nav.fixed, 'hide-nav':!nav.show}" ng-mouseleave="nav.mouseLeave()">
      <ul>
        <li><a href="#one">ABOUT</a></li>
        <li><a href="#two">MUSIC</a></li>
        <li><a href="#three">SHOWS</a></li>
        <li><a href="#four">CONTACT</a></li>
      </ul>
    </nav>
<Br/>
<br/>
<br/>
<br/>

<div id="content">
<div id="nav-trigger" ng-mouseenter="nav.toggleFixed()">Mouse over here</div>
</div>

CSS

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

li,
li a {
  display: inline-block;
}

nav {
  width: 100%;
  height: 4.5rem;
  margin: auto;
  position: absolute;
  top: 0;
  line-height: 4.5rem;
  transition: background-color .5s ease;
}

.fixed-nav {
  position: fixed;
  background: #fff;
  transition: top .2s ease-out;
}

.hide-nav {
  top: -4.5rem;
}

#nav-trigger {

}

nav ul {
  width: 90%;
  margin: auto;
}

nav li {
  width: 24%;
  margin: auto;
}

nav a {
  padding: 0 15%;
  color: #222;
}

nav a:hover,
nav a:active {
  color: #bf9600;
  background: #eee;
}

#content {
    height: 2000px;
}
}

JavaScript

var app = angular.module('thomasApp', []);

app.controller('AppCtrl', function($scope, nav) {
    $scope.nav = nav;
  });



  app.factory('nav', function($rootScope) {
    var nav,
        show = true,
        fixed = false,
        docHeight = 0,
        position = 0,
        change = 0,
        scroll = 0;

    nav = {
      show: show,

      fixed: fixed,

      docHeight: docHeight,

      position: position,

      change: change,

      scroll: scroll,

      setPosition: function(offset) {
        nav.change = offset - nav.position;
        nav.position = offset;
        nav.docHeight = document.body.clientHeight - window.innerHeight;
      },

      toggleShow: function() {
        nav.show = !nav.show;
          console.log('toggle')
      },

      toggleFixed: function() {
        nav.fixed = !nav.fixed;
      },

      mouseLeave: function() {
        if (nav.fixed)
          nav.toggleShow();
      },

      detectScroll: function() {
        nav.scroll += nav.change;
        if (nav.scroll > 15 || nav.scroll < -15) {
          nav.toggleShow();
          nav.scroll = 0;
        }
      }
    };

    return nav;
  });



  app.directive('hideShowNav', function($window) {
    return function(scope, element, attrs) {
      angular.element($window).bind('scroll', function() {
        console.log(scope.nav);

        scope.nav.setPosition(this.pageYOffset);

        if (!scope.nav.fixed) {
          if (scope.nav.position > 400) {
            scope.nav.toggleShow();
            scope.nav.toggleFixed();
          }
        }
        else
          if (scope.nav.position < 1)
            scope.nav.toggleFixed();

        if (scope.nav.fixed) {
          if (scope.nav.position == scope.nav.docHeight && !scope.nav.show) {
            scope.nav.toggleShow();
          }
          if ((scope.nav.show && scope.nav.change > 0) || (!scope.nav.show && scope.nav.change < 0))
            scope.nav.detectScroll();
        }
      });
    };
  });