Hey, loving the plugin. Just wanted to know if there is a way to set the boundaries for active state higher than the destination for the links? Thanks!

Very nice plugin. Very useful.
Is it possible to have active class on the current sub-section like the current section ?
I have tried to modify the js file by no joy.
Sojahu

Is there a destroy method implemented?

Currently the active state switches prematurely if there's another section close to the one the user navigated to. It's also impossible to get the last nav item to show as active if it's very close to the bottom of the page and scrolling end. This will be an add-on to markup being sectioned off in #13.

There are cases that each section of the website takes up the whole viewport of the browser, so it would be really handy to be able to take the user to the next/previous section just after a few scrolls...

It's great that scrollNav's HTML is built based on a great BEM methodology. But it would be even greater if it followed all BEM rules. By default, a list item has a scroll-nav__item class, so according to BEM rules, an active element should have a modifier, so an active list item should have scroll-nav__item scroll-nav__item--active classes.

I know that this change would cause backwards compatibility issues, so I suggest adding an another configuration parameter: activeClass.

The same applies to other modifiers. I would replace in-view with scroll-nav__item--in-view

Update the very outdated toolchain with a relatively minimal set of tools. Direction so far:

• npm scripts for task running (may switch to Gulp if ends up painful)
• microbundle for file bundling/transpiling
• jest for testing
• eslint for linting and prettier fomatting

Setup Jest with coverage output and turn Travis back on

I'm not sure if this is intended but when you have a large footer the nav scrolls past the body and overlaps the footer.

Is there a way to stop the nav from scrolling or hide it when reaching a certain part of the viewport?
See this for a demo:
http://codepen.io/anon/pen/yICcF

Hi,

this plugin will work if you have normal web application, but one you use single page application will not work because the SPA depends on the hash string.

Thanks
Omar

Hi,

I use 'reset.css', then a 0 margin is applied to 'h2' and 'p'. Also I have a decoration below H2 called 'dotted-5'. Under these conditions I get wrong active item.

I made this example:

http://jsfiddle.net/kurtko/65je5n9v/

Thanks

scrollNav is great but there's on major feature missing - the URL is not updated after scroll. I wanted to implement it manually, but there's no callback fired after scroll, so I'm unable to update the URL manually.

I want to first congratulate/thank you guys on this great plugin.

It would be great if the anchors had better names than just "#scrollNav-4" or whatever the anchor number is. So for example if I had a header called "Getting There",
it would be awesome to get a URL of "#getting-there". It's SEO friendly, makes for better link sharing, and reduces the chances of broken hash links. I often find myself swapping content sections for better page organization. So if I swapped the content of #scrollNav-4, it would no longer link to the right place (assuming someone linked to this from another website). Better hash names remove this issue because it will consistently link to the same place regardless of placement. :-)

The navigator highlighter will be active long before actually getting to the headers it's supposed to highlight.

Refresh the page, you will notice that it suddenly works 100% as expected (as in highlighting "waits" until you actually scroll to the next header). I'm guessing this has something to do with the images themselves being cached, hence affecting how the anchors are loaded.

Hello, thank you for the plugin!

Is it possible to add a feature which would append an active class to the section currently in view?

I found an interesting glitch with the plugin, when text is within a paragraph tag it displays as it should. However if text is not wrapped with a tag, it gets displaced.

My current configuration is:

$('.article-text').scrollNav({
                    sections: 'h2',
                    subSections: false,
                    sectionElem: 'section',
                    showHeadline: false,
                    headlineText: 'Table of Contents',
                    showTopLink: true,
                    topLinkText: 'Overview',
                    fixedMargin: 0,
                    scrollOffset: 44,
                    animated: true,
                    speed: 500,
                    insertTarget: this.body,
                    insertLocation: 'appendTo',
                    arrowKeys: false,
                    scrollToHash: false
});

I tried playing around with it to see if I could fix it. No luck. If I had to guess it probably has to do with line 62-83:

find_sections: function($el) {
      // Find the html for each section

      var target_elems = S.settings.sections;
      var raw_html = [];

      if (S.settings.showTopLink) {
        var $firstElem = $el.children().first();

        if ( !$firstElem.is(target_elems) ) {
          raw_html.push( $firstElem.nextUntil(target_elems).andSelf() );
        }
      }

      $el.find(target_elems).each(function() {
        raw_html.push( $(this).nextUntil(target_elems).andSelf() );
      });

      S.sections = {
        raw: raw_html
      };
    }

I'm not very experienced with Jquery, hence why I don't know how to also grab raw text to be inserted as well.

Please disregard, unless you're @jimmynotjim.

Jumps around when switching from absolute to fixed positioning and the active section doesn't always update.

I want all these levels to be shown in the menu:

sections: 'h2, h3, h4'

But all those entries have the same attributes within the nav menu so I cannot apply different styles for h2, h3, etc. Do I miss something?

<nav class="scroll-nav" role="navigation">
  <div class="scroll-nav__wrapper">
    <ol class="scroll-nav__list">
      <li class="scroll-nav__item">
        <a href="#scrollNav-1" class="scroll-nav__link">Foo class</a>
      </li>
      <li class="scroll-nav__item">
        <a href="#scrollNav-2" class="scroll-nav__link">Properties</a>
      </li>

How could I apply different CSS style to h1 entries ("Foo class") and h2 ones ("Properties")?

Perhaps the option to add classes to the uppermost level selector nav class="scroll-nav" would be nice. I've defined styles based on a particular class present around my site, and scroll-nav should have those styles. Without the ability to add a class or two, I have to add .scroll-nav to my styles, which seems like duplicate work and unnecessarily specific to add to the styles.

Hey there!

So, I've been using this plugin for development, and during tests I found out that the active class for the sub-item is not updating properly for Google Chrome - the page is getting positioned correctly, but the active class goes to another unrelated section. It's working on Firefox and even IE8, only Chrome is giving this problem!

When I open the Developer Tools (Inspector) with the Disable Cache option set to true, the active works properly. But if I close the Inspector and reload the page, the problem come back!

Any ideas why this is happening? I'm using JQuery 1.12.1 with Bootstrap.

Issue

When the nav is positioned on the right it breaks when fixed positioning is set.

Suggested Fix

Add a wrapper div to the nav to set the layout, apply the fixed positioning just to the nav. As long as left and right aren't set, the nav will float within the bounds of the wrapper div.

Add the following options:

Show Headline: y/n
Animation Speed

Start this off simple by moving the getOrSetID function to a utility and writing some unit tests for it.

More or less what it says. The nav works great in chrome, but the mousewheel gets stuck in the section the nav is targeting.

Hi,

great plugin ! Thanks for the work you did !

I do have one suggestion :
Let's say you want the active scroll-nav__item to be switched when it gets 250px from the top : you set the scrollOffset to 250px.
However, when clicking on a certain scroll-nav__item, I don't want to scroll until the beginning of that section is 250px from the top. I want it to be let's say 40px from the top.

What I'm suggesting is simply differentiating the scrollOffset and the scrollTop behavior.

What do you think ?

Best regards,
G.

Quite possible that I've made too many modifications to my own stuff regarding the offset, but I was running into an issue where the last link in the navigation menu wouldn't take the class of "active."

The _check_pos function has the following code at line 213-217:
$.each(S.sections.data, function(index) {
if ((this.top_offset > boundry_top && this.top_offset < boundry_bottom) ||
(this.bottom_offset > boundry_top && this.bottom_offset < boundry_bottom) ||
(this.top_offset < boundry_top && this.bottom_offset > boundry_bottom) ||
(this.top_offset === boundry_top && this.bottom_offset === boundry_bottom)) {
sections_active.push(this);
}
});

However, if I set my scrollOffset to 0, it fails to match any of those above _check_pos conditions.

$('.maincontent').scrollNav({
scrollOffset: 0,
animated: true, // animate the scroll
speed: 500, // animate scroll at 500 speed
insertTarget: this.selector,
insertLocation: 'insertBefore', // inserts the scroll-nav
arrowKeys: true, // allow use of arrow keys for scrolling through navigation
onInit: null,
onRender: null,
onDestroy: null
});

I added this line of code to the conditions and it resolved my issue:
|| (this.top_offset === boundry_top && this.bottom_offset === boundry_bottom)

Final chunk of code looks like this:
$.each(S.sections.data, function(index) {
if ((this.top_offset > boundry_top && this.top_offset < boundry_bottom) ||
(this.bottom_offset > boundry_top && this.bottom_offset < boundry_bottom) ||
(this.top_offset < boundry_top && this.bottom_offset > boundry_bottom) ||
(this.top_offset === boundry_top && this.bottom_offset === boundry_bottom)) {
sections_active.push(this);
}
});

After a long hiatus I'm finally setting aside time to work on this project again. I've come up with a list of priorities for the next release and would like feedback from anyone that's used scrollNav in production, and especially from those that have contributed to the project in the past. If you have features or changes you'd like to see, or if you'd like to lend a hand with ones I've identified, please leave a comment.

• Re-written in native ES6 - It's finally time, if you're already transpiling your project's code there's no reason for plugins to include excess baggage you don't need.
  • For those that can't/aren't transpiling, deploy an ES5/jQuery version in addition to the ES6 version
• Create debug method for debugging - Right now it's automatically included in production code which is unnecessary
  • Move logging to debug mode
  • Add visual cues when enabled (highlight active section of screen)
• Stop modifying the page content other than inserting IDs and links -
  • Stop adding section elems. Addresses #78. I've been thinking about this a lot the last few months and I'm think I may have a solution
  • Ensure existing IDs aren't overwritten
  • Touch the DOM as little as possible
• Reduce customizations - It's gotten out of hand, and as nice as it is for users to change classnames or make tweaks, the code has become a bit unruly as a result. Not sure what to trim just yet, but looking for feedback on what's absolutely necessary vs nice-to-have. NOTE: See comment below for list of option priorities.
• Documentation and playground - The docsite could use a refresh
  • need a plan for allowing users of v2 to continue referencing docs
  • would love to have a playground where it's easy to experiment with the code
• Address small screen usage - Let's face it, it sucks.
  • Possible solution is to use a toggle to show/hide the ToC, like a hamburger menu
  • Not sure how that fits within this codebase, seems impossible to enforce the same solution on every project, but the docs and playground could address it

cc. @MeghdadHadidi @RobLoach @willthemoor @marcamos @germanny @sheeep @pixelbandito @Borzik @thomasguillory

Note: I apologize in advance if you are no longer using scrollNav and I included you in the mentions above. I want to ensure that anyone that has contributed and may still be interested is given a chance to be heard or help. If you're not interested I won't be offended if you mute this thread and ask to be removed from any future mentions.

Issue closed due to discovering that it had to do with $('article').scrollNav, article for some reason was not being properly registered which broke the active class. To fix this I changed to $('.article-text').scrollNav

Hey there,

I followed the guidelines/instructions to the letter, and when I load the page I get the following console error:

f.nextUntil(...).andSelf is not a function at Object._find_sections (jquery.scrollNav.min.js:4) at HTMLElement.<anonymous> (jquery.scrollNav.min.js:4) at Function.each (jquery-3.1.1.min.js:2) at r.fn.init.each (jquery-3.1.1.min.js:2) at r.fn.init.init (jquery.scrollNav.min.js:4) at r.fn.init.a.fn.scrollNav (jquery.scrollNav.min.js:4) at custom.js:80

Any ideas what the issue could be?

First of all, thank you for making this. I was slogging along trying to do something similar in Java, but being a noob it would take me too many cycles and was not realistic for the project I am working on.

I am wanting to use this in conjunction with a Parallax style website. Most of these have staked "slides" and when you scroll to them something fancy happens.

Since you are giving the sections classes like "scrollNav-1"... etc, what would be the best way to begin a function that says...

When "scollNav-X" is scrolled to, then do Y?

I imagine I'd write a function for each of my 10 slides, as I may want the contents to do different things for each.

I'm new to jQuery. I know the basics, and can get jQueryUI to do THINGS, but I'm not so sure how to start a function that KNOWS when you've scrolled to a specific section.

Thank you in advance for any help you can give.

-Andrew

scrollnav.dance should make the user's screen do some sort of dancing move.

Trying to add h3's as subsections that are nested 2 levels deep below the h2 sections. Wondering if there is code you could share if not possible for a future implementation.

If sections have elements that are shown / hidden on user interaction (changing the content height), the scroll positions won't match the menu items, since the section positions is only calculated on init.

One fix is:
$(window).on('click.scrollNav', function() {
$.fn.scrollNav('_setup_pos');
});

This makes scrollNav update the positions each time the user clicks an element. It only works on click, obviously, but a call to scrollNav('_setup_pos') can be added to any event that will change the content height.

I don't think this is a bug, but a method could be provided to update the section positions, or this could be mentioned in the docs.

Awesome plugin, thank you =)

Hey, love the plugin!

Little feature request:

I have several headers that are long-winded. If the plugin provided an option to use a specified data attribute on the header element as an alternative to the text contained within the header element I would be a super happy camper.

For instance:

<h2 data-header="Shorter">A Kinda Long And Really Descriptive Header</h2>

Instantiate plugin:

$('.some-element').scrollNav({
    textAttribute: 'data-header'
});

The name of the option could admittedly use some work. headerText? headerAttribute?

When showTopLink is true, menu items from the 3rd and lower do not have animation/transforms (Chrome tested) - but when set to 'false' they are ok.

If there's any additional html markup, like a link, inside an h3 (or whatever the selector is set to), the generated scrollNav menu will print that markup. For instance:

It looks like changing line 50 to use text() rather than html() ($text = $(this).html(); => $text = $(this).text();) would work, but I haven't tested it outside of my specific case.

(This plugin has saved me a ton of time today. Cheers.)

If a meta-key is keyed at the same time as the up/down arrows the plugin should not scroll to the next section.

Ex - cmd+down should be ignored

Posted by @zachwolf on CodePen

I have two issues with wrapping each section in a section tag:

1. Each section is wrapped in double section tag with the same ID. Look at the screenshot.
2. If page already have sections or div wrapper in markup, another wrap is an excess. Option for choosing wrap would be useful.
   

When I run grunt jshint or any task that includes it, I see this error:

Warning: Path must be a string. Received null Use --force to continue.

After a little digging, I think it's due to a missing "reporterOutput" property, possibly from more recent versions of JSHint.

I have JSHint version 2.5.11 in my node_modules folder.

Please update my Twitter handle to thejeffbyrnes in scrollNav@gh-pages index.html line 231

I see that each section is wrapped in scroll-nav__section element. Is it really needed? IMO it could be implemented in a different way.

I can see at least 2 scenarios:

1. ID's could be added directly to header elements. ID's could be generated based on a header text. I know that it could cause duplicated IDs. But this problem is easy to solve. In case of duplicated IDs a suffix could be added (#duplicated-header-1, #duplicated-header-2, and so on)
2. The plugin could rely on ID's that already exist in the HTML. Of source, It would mean that users have to deal with ID's on their own, but it's OK. It could be an optional feature. The first solution might be a default one, the second solution might be an advanced mode.

Hi Jimmy. I loved this stuff made by you, especially the the particular section remain highlighted in the navigation when we are viewing that part in the browser.
I want to achieve that but somehow facing problem. I 'm attaching my code below.

<div class="abc"> 
    <div class="my-count" id="div-sub-one" data-toggle="collapse" data-target="#sub-one-content">
            <h3>
        <span class="my-no">Part One</span>
                <span class="icon">plus</span>
            </h3>
        </div>

    <div id="sub-one-content" class="collapse in">
        <p>hohohahahah</p>
        <p>hohohahahah</p>
    </div>
</div>

<div class="abc"> 
    <div class="my-count" id="div-sub-two" data-toggle="collapse" data-target="#sub-two-content">
            <h3>
        <span class="my-no">Part Two</span>
                <span class="icon">plus</span>
            </h3>
        </div>

    <div id="sub-two-content" class="collapse in">
        <p>hohohahahah</p>
        <p>hohohahahah</p>
    </div>
</div>

I wrote my css. So dont worry bout styling. As well as I added .active !
.scroll-nav__item.active {
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
padding-left: 0.5em;
font-weight: 800;
}

Now, though I get the navigation like this
Day
Part One
Part Two

but when I click on Part One/Part Two in the navigation the scrolling works fine but it stays highlighted only for the Part One/Part Two portion, not its content. What I want is keep the navigation same but keep the Part One, Part Two portion highlighted until I'm not moving from Part One, Part Two's contain as well.
So If I viewing Part One's content the Part One in the navigation will be stayed highlighted. Same for Part Two as well.

Hope I manged to elaborate the problem?
Thanks a lot in advance. Hope you help.

Hello,
Thank you for this plugin.
I open this issue because I can't find a precise information about the browser compatibility : I currently have a bug with IE11 but I don't know if that browser is normally supported and thus deserves opening an issue...
It would help to have the browser compatibility info in the README.

Maybe utilize:
https://github.com/Polymer/MutationObservers/blob/master/MutationObserver.js

I am calling the scroll nav during (window).load in an attempt to get the computed height of the nav element.

In CSS I am not giving my nav any height, but the scrollNav adds to that height. This is intended.

My aim is to attempt to force the scrollNav to have a scrollOffset the same as the height of the nav (since I have my nav as a bar across the top with a fixed position and z indexing and hovers on top of the content at all times).

Is this possible? It doesn't seem to be working? But it also is not throwing any errors.

$(window).load(function(){

var offsetHeight= $('nav').outerHeight(true);

$('#PageWrapper').scrollNav({
    sectionElem: 'div',
    scrollOffset: offsetHeight,
    showTopLink:false,
    arrowKeys:true
});

});

Hi,

If we try to create a navigation for this part of a paragraph,

<section>
            <h2>Description</h2>
            scrollNav is a light jQuery plugin that grabs your page's existing content, divides it up into logical sections and builds a customizable scrolling sidebar navigation. Scroll this page and watch the nav follow along with you.
            <p>test test test test test test test test test test test test test test test test test test test </p>
</section>

then the resulting section will skip the following text:
scrollNav is a light jQuery plugin that grabs your page's existing content, divides it up into logical sections and builds a customizable scrolling sidebar navigation. Scroll this page and watch the nav follow along with you.

It will only keep the elements that are wrapped in some html element.

Open discussion on what needs to be fixed, what options should be added, and how to incorporate an automated build process using Grunt. Sub-sections have been addressed in #13 and "active states" bugs are being addressed in #14.