dom-minimap
Simply lovely dom minimap
Vertical only (for now)
Use when you have looong pages and want an intuitive way to see where you are and navigate around.
Demo
Usage
You can easily add minimap to existing dom structures, by hooking on to existing id, classes or adding your own.
Lorem Ipsum Gotsum
const Minimap = var minimap = var el = document // now... call this everytime you think that your content might have changed. Its ok... its cheap.
Options
// Defaults: content: 'minimap-content' // id of element containing sections, or the element directly sections: 'minimap-section' // css class used for finding sections, or a function (containerElm) => return Array(sections) title: 'data-section-title' // element attr containing section title, or a function (sectionElm, px-size) => return title tooltip: 'data-section-tooltip' // element attr containing section tooltip, or a function (sectionElm) => return tooltip paddingBottom: 0 // because sometimes you need more then 0.0001 px between sections, put <value>px or <value>%
Styling
If you want to style the minimap, you can override some of the default styles. The styles are added first in head so adding this to any of your css files should overwrite the styles.
sections:
the scroll 'hidden' overlay: