<commit_before># [jQuery sectionNav][1]

A jQuery plugin to build a sticky navigation of a article’s sections with highlighting while scrolling.

## Usage

### Import

Start by import the script to your page, the best location is in the footer, but no matter what make sure it follows your jquery file.

	<script src=“jquery.sectionNav.min.js”></script>

### Build your page

Include a class or id hook in the element you want to apply the plugin to and include an `<h3>` for each section you want to inlcude in the navigation.

```html
<div class=“main”>
	<article class=“post-article”>
		<h1 class=“post-heading”>This is the main heading for the article</h1>
		<h2 class=“post-sub-headling”>This is a sub-heading for the article</h2>
		<p>Yada yada yada...</p>
		<h3>This is a section heading</h3>
		<p>More yada yada...</p>
		<h3>Another section heading</h3>
		<p>More more yada...</p>
	</article>
</div>
```

### Initialise

Now initialise the plugin with your hook for the article

	$(‘.post-article’).sectionNav();

and the plugin scans the article, grabs all the `<h3>`s, adds them to the navigation list and inserts the list before the article. It’s that easy...well almost.

### Styling

To keep the plugin simple there are no styles added to the navigation, that’s all up to you. The nav structure looks like this and includes class names in [@csswizardry’s][3] [inuit.css][4] framework style:

	<nav class=“section-nav”>
		<span class=“section-nav-heading”>
		<ol class=“section-list”>
			<li class=“section-list-item”>
				<a class=“section-link”>

Check out [this demo][2] to get an idea on what you can do.

## Options

There are a few customizable options in sectionNav besides the element you apply it to using key: value pairs. Here are the defaults.

	$(‘.post-article’).sectionNav({
		sections: ‘h3’, 
		tittleText: ‘Jump To’,
		fixedMargin: 40
	});

### Sections

As mentioned, the script automatically searches for `<h3>`s within the target article. If your page structure differs, feel free to target another element, like a `<h2>` or `<h4>` or even a class, like `.section-headline`.

### Title Text

sectionNav’s default title text is ‘Jump To’, but feel free to change it to whatever works for you, like ‘Article Sections’ or ‘Page Navigation’

### Fixed Margin

This is the `top` dimension you set for the `.section-nav.fixed` class, which is applied as the user scrolls down the page and is removed as they scroll above the article. You definitely want to set this if you don’t use the default 40px, otherwise the nav will jump around as the user scrolls past the top of the article.<commit_msg>Updated all code blocks for syntax highlighting<commit_after># [jQuery sectionNav][1]

A jQuery plugin to build a sticky navigation of a article’s sections with highlighting while scrolling.

## Usage

### Import

Start by import the script to your page, the best location is in the footer, but no matter what make sure it follows your jquery file.

```html
<script src=“jquery.sectionNav.min.js”></script>
```

### Build your page

Include a class or id hook in the element you want to apply the plugin to and include an `<h3>` for each section you want to inlcude in the navigation.

```html
<div class=“main”>
	<article class=“post-article”>
		<h1 class=“post-heading”>This is the main heading for the article</h1>
		<h2 class=“post-sub-headling”>This is a sub-heading for the article</h2>
		<p>Yada yada yada...</p>
		<h3>This is a section heading</h3>
		<p>More yada yada...</p>
		<h3>Another section heading</h3>
		<p>More more yada...</p>
	</article>
</div>
```

### Initialise

Now initialise the plugin with your hook for the article

```javascript
$(‘.post-article’).sectionNav();
```

and the plugin scans the article, grabs all the `<h3>`s, adds them to the navigation list and inserts the list before the article. It’s that easy...well almost.

### Styling

To keep the plugin simple there are no styles added to the navigation, that’s all up to you. The nav structure looks like this and includes class names in [@csswizardry’s][3] [inuit.css][4] framework style:

```html
<nav class=“section-nav”>
	<span class=“section-nav-heading”>
	<ol class=“section-list”>
		<li class=“section-list-item”>
			<a class=“section-link”>
```

Check out [this demo][2] to get an idea on what you can do.

## Options

There are a few customizable options in sectionNav besides the element you apply it to using key: value pairs. Here are the defaults.

```javascript
$(‘.post-article’).sectionNav({
	sections: ‘h3’, 
	tittleText: ‘Jump To’,
	fixedMargin: 40
});

### Sections

As mentioned, the script automatically searches for `<h3>`s within the target article. If your page structure differs, feel free to target another element, like a `<h2>` or `<h4>` or even a class, like `.section-headline`.

### Title Text

sectionNav’s default title text is ‘Jump To’, but feel free to change it to whatever works for you, like ‘Article Sections’ or ‘Page Navigation’

### Fixed Margin

This is the `top` dimension you set for the `.section-nav.fixed` class, which is applied as the user scrolls down the page and is removed as they scroll above the article. You definitely want to set this if you don’t use the default 40px, otherwise the nav will jump around as the user scrolls past the top of the article.
{'fraction_non_alphanumeric': 0.10691469372416385, 'fraction_numerical': 0.008267568583239383, 'mean_word_length': 4.218627450980392, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '32006', 'n_tokens_mistral': 1686, 'n_tokens_neox': 1592, 'n_words': 755}