1 Quick Start: Single-Line Automatic Sidebar Generation
Simply select your heading elements with jQuery and invoke .titleNav(). The plugin automatically creates the navigation wrapper <div class="title-nav-ul">, extracts the heading titles into <a class="title-nav-li"> anchors, switches position to fixed when scrolling past the top threshold, and applies the .active class to the heading currently in view.
<!-- 1. JavaScript: Single line invocation -->
<script>
$('h3').titleNav();
</script>
<!-- 2. CSS: Matching styles from zhangxinxu's article -->
<style>
.title-nav-ul {
width: 200px;
border: 1px solid #ccc;
background-color: #fff;
box-shadow: 1px 1px 3px rgba(0,0,0,.25);
position: absolute;
top: 160px; right: 16px;
}
.title-nav-li {
display: block;
padding: 10px;
text-decoration: none;
color: inherit;
}
.title-nav-li.active {
font-weight: bold;
}
.title-nav-li:hover {
background-color: #f0f0f0;
}
</style>2 Horizontal Navigation Bar: Custom Nav Element & Flex Styling
As the article explains: "If you want a horizontal navigation fixed at the top, simply adjust the styles of the .title-nav-ul and .title-nav-li classes." You can also pass an existing navigation container element via the nav option.
/* CSS: Switch from vertical sidebar to fixed top flexbar */
.title-nav-ul.horizontal {
position: sticky;
top: 0;
width: 100%;
display: flex;
background-color: #1e293b;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
z-index: 60;
}
.title-nav-ul.horizontal .title-nav-li {
display: inline-flex;
padding: 10px 18px;
color: #94a3b8;
border-bottom: 2px solid transparent;
}
.title-nav-ul.horizontal .title-nav-li.active {
color: #38bdf8;
border-bottom-color: #38bdf8;
font-weight: 600;
}
/* JavaScript: Pass target nav element and scroll container */
$('#horizontal-article h3').titleNav({
nav: $('#horizontal-nav-bar'),
container: $('#demo2-viewport'),
offsetTop: 0
});3 Scoped Container Scrolling & Offset Tuning (container & offsetTop)
By default, the plugin observes $(window) scrolling and switches to fixed positioning at offsetTop: 20 (20px). When embedding headings inside an overflow container or modal dialog, specify container: $('#my-pane'). Adjust offsetTop to align headings with your visual header boundary.
// API Options Matrix:
// - container: Scoped scroll element ($('#scroll-box') instead of $(window))
// - offsetTop: Distance from top edge where headings trigger active state
$('#demo3-viewport h3').titleNav({
container: $('#demo3-viewport'),
offsetTop: 30 // Switches fixed / active threshold at 30px
});offsetTop and watch the red dashed threshold line:
4 Intelligent Bottom-Edge Detection for Short Ending Sections
A notorious flaw in standard scrollspy implementations is that short ending sections (like "Conclusion" or "References") never reach the top offset threshold before scrolling hits the bottom limit, leaving the previous item mistakenly highlighted. titleNav.js includes thoughtful edge-case optimizations to guarantee the final navigation item activates properly when scrolled to the end.
// Excerpt from titleNav.js scroll event handler:
var scrollTop = $container.scrollTop();
var containerHeight = $container.height();
var scrollHeight = $container[0].scrollHeight;
// Edge case: When scrolled to the bottom of the container,
// automatically highlight the last navigation item.
if (scrollTop + containerHeight >= scrollHeight - 8) {
$navItems.removeClass('active');
$navItems.last().addClass('active');
return;
}5 API Reference & Generated DOM Inspection
Full specification of the $().titleNav(options) parameter object and the internal HTML structure generated by the plugin.
<!-- Auto-generated navigation markup created by titleNav.js -->
<div class="title-nav-ul">
<a href="javascript:" class="title-nav-li active">1. Why the name LuLu?</a>
<a href="javascript:" class="title-nav-li">2. Why use LuLu?</a>
<a href="javascript:" class="title-nav-li">3. Design philosophy</a>
<a href="javascript:" class="title-nav-li">4. Highlight me when scrolling to bottom</a>
</div>| Parameter | Default | Type | Description |
|---|---|---|---|
nav |
null |
Object |
Represents the navigation element. Defaults to null, meaning the plugin automatically generates the navigation container rather than using an existing element on the page. |
container |
$(window) |
Object |
The scroll container element; must be a jQuery wrapper object. Defaults to browser window scrolling. |
offsetTop |
20 |
Number |
Distance in pixels from the top edge when the navigation switches to fixed positioning. Can be set to 0 if the navigation sticks flush to the top. |
Live DOM Inspector (Reflects Section 1's Generated Nav in Real Time):
I am in the cold northern night where spring flowers grow.
If time allows before darkness falls, I will forget your eyes;
A lifetime spent in vain, chasing a dream that never dies.”