Introducing Upbar.js

Mon, Oct 3, 2016

Upbar.js is a simple javascript function that takes a html element and turns it into an element that responds to a users need for access, just like the medium navigation bar.

After a number of iterations, I am please to announce the release of my first usable open source project. The upbar is just like the medium navigation bar. When the user scrolls down the page, rather than fix the navigation bar in place, we hide it, until the user scrolls up when we make it visible again.

The feature can be seen on this blog, should you visit a page that has enough height (and most do).

Using Upbar.js

There are a number of ways to use it. The first is to download the project and include the file upbar.min.js on your html page. You can also use a module loader like Webpack or Browserify and install upbar.js from npm using

npm install upbar --save

Once you have upbar ready for your environment, its just a matter of creating an new instance and passing in the DOM element you want to use as your upbar.

var UpbarInstance = new Upbar(document.getElementById("mn"));

Will will also need to configure some css classes in order to make things work. By default the classes are .abs-show .abs-hide and .abs-animate and I have included a sample set that I use on this blog.

.abs-show {
  position:fixed;
  transform: translateY(0px);
  top:0;
  left: 0;
  box-shadow: 1px 0 1px 0 rgba(0,0,0,0.2);
}

.abs-hide {
  position: fixed;
  top:0;
  left: 0;
  transform: translateY(-70px);
}

.abs-animate {
  transition: transform 0.3s;
}

You have to use the animate class, because you don’t want to animate all transitions, only some, For example - you don’t want to animate the first hide on scroll.

Conclusion

Upbar is a pure js solution that works ok. It relies on the classList api and Object.assign so it is only going to work in evergreen browsers, but the functionality is removed, not broken if the browser is not supported. As this is a nice to have, I feel that this is a better solution than requiring a big library like jQuery.

You can find the project on github.

comments powered by Disqus