npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

navbar

v3.0.0

Published

A tiny library to create nav elements that smart update on scroll to keep the correct item active.

Downloads

464

Readme

navbar

navbar is a tiny library to help you create navigation bars that listen for scroll events and calculate which element is closest to the top left of the window, giving the associated navigation list item a navbar-active class. You feed it a list of elements and a function that returns navbar list items, and it returns a nav element populated with navigation items. You can dress this up with CSS to make it look how you like.

It may not look like it's doing much, but it's fiddly stuff. For a demonstration open demo.js in your (recent version) browser.

Installation

This library is provided as an ES module. If you require a UMD build, please use version 2. This library has no production dependencies so using it with a bundler or directly in the browser requires no further setup.

Where available, this library will use passive event listeners to make scrolling sliky smooth.

This library should support any browser that implements EventTarget.addEventListener or EventTarget.attachEvent, which should cover almost any browser in use today, and certainly IE >= 6. If you find that navbar does not support a browser newer than IE6 then I consider it a bug, so please open an issue for it.

Usage

navbar is a function that takes an options object with the fields:

| name | required | default | description | | ---- | -------- | ------- | ----------- | | elementList | true | N/A | An array or array-like object populated with elements to be represented in the nav list. | | makeNavListItem | true | N/A | A function that takes an element and creates a navigation list item from it. | | target | false | document | A DOM element to listen to for scroll events. | | tagName | false | nav | Define the tag of element for navbar to return. | | debounceTime | false | undefined | After a scroll event, subsequent scroll events will be ignored for debouceTime milliseconds. |

The navbar listens to scroll events, and will add a navbar-active class to the nav list item which is closest to the top of the window. This is pretty much all that navbar does, although I like to think that the interface that it presents is nice for defining a nav element. Only one element will have this class at any given time. If a debounceTime is given (recommended), then navbar will ignore further scroll events for that amount of time. Depending on your use case this may enhance performance.

Example

Similar to the demo, except using Browserify rather than just appending to the window object:

const navbar = require('navbar');

// This function is where you define a list element, giving it classes,
// registering listeners, and appending children as you like. This one couples
// with demo.css to produce labels that appear when a the list item is hovered
// over.
function makeNavListItem(element) {
  const li = document.createElement('li');
  const label = document.createElement('span');
  const spot = document.createElement('span');

  // A label should have a nav-label class and contain the same text as the
  // element.
  label.className = 'nav-label';
  label.textContent = element.textContent.trim();

  spot.className = 'nav-spot';
  spot.textContent = '●';

  li.appendChild(label);
  li.appendChild(spot);

  // Custom className for our CSS purposes only. navbar will work around
  // existing classes by appending or removing the navbar-active class.
  li.className = 'nav-element';

  // I want clicks on nav items to scroll the relevant title into view.
  li.addEventListener('click', () => element.scrollIntoView(true));

  // Remember to return the list element at the end!
  return li;
}

// Generate a nav list element for every h2 element on the page.
const nav = navbar({
  elementList: document.querySelectorAll('h2'),
  makeNavListItem,
  debounceTime: 100
});

// Finally, append the element to the document. In this demo the navbar is
// fixed, so I have simply appended to the body.
document.body.appendChild(nav);