chriswojcik/single-page-nav

jQuery plugin that provides smooth scrolling and advanced navigation for single page websites.

single-page-nav's Issues

2 navigations in one page

I have 2 navigations in one page (header and footer), the problem is on current class. Current class on header nav doesn't change when I clicked link on footer nav. It also happened otherwise.

Any solution for this?

How can i put an external link

all is working, but when i put an external link it's doesn't work.
How can i do for that?

Nice Script with few problems

Hey this is a nice script but there are few problems.

1. You seem to set css with the script like giving position on sticky and unsticky. In my case your position breaked my code. Smarter idea will be to add that code with css (<style>) code and not with javascript. In my case in order to fix the problem i had to add css code (left: 0px; right: 0px;) to fill the whole width.
2. Second problem is that sticky and unsticky classes didn't worked on line 153 i had to change "(windowPosition >= $selfScrollTop + options.startAt) " to (windowPosition >= options.startAt) in order to make it work
3. Third problem you have adding animation with animate.css the animation works only once but if you go back to the top and scroll down the animation don't work again. Might be possible to remove the animate class when you go to unsticky and get it back when you go to sticky.
4. Last problem is that the last item of the menu is mostly at the bottom and it's not detected as "active" menu link unless you add a lot of padding or big element below it. But most script has the same problem.

Anyway this is a great script thanks for sharing it

Demo page is 404

Could you update it, please?

Doesn't Detect position:fixed element (scrollmagic's pinned element)

the script of menu doesn't detect the element that pinned with scrollmagic, skrollr or scrollorama inshort it doesn't get element with position fixed if there is any fix for that so it would be really helpful thanks.. 😄

minified version != ordinary version

I wanted to add a finished function. When I loaded jquery.singlePageNav.js, then the finished was called as documented in the REAMDME.md file.

When I loaded jquery.singlePageNav.min.js, then the finished function was NOT called.

Ancor Links outside of Nav?

Good Afternoon

I included your project in a very simple way:

$('#nav_wrap').singlePageNav({
    speed: 1000,
    filter: ':not(.ext)'
});

Now, I have links on my website pointing to Ancor links inside the nav.
So if I take your Demo page for example and create a link pointing to #section2 it doesn't scroll (because it's outside #nav_wrap).

Is there a way to solve this?

Thanks in advance
Best Regards
Dollique

AutoScrolling

Hello! How can i make autoScrolling like on https://github.com/alvarotrigo/fullPage.js?

The last section remains unselected if the document bottom is reached

The last section on a page will remain unselected if the bottom of the page is reached before the top of that section (e.g. the section's height is small).

We can force the last section to be selected when the bottom of the page is reached using the following few lines of code added to the 'getCurrrentSection' method (right before the return statement)

        // get the last section if we reached the bottom of the page 
        // before reaching the last section top
        var pageBottom = $(document).height() - $(window).height();
        if ( scrollPos == pageBottom ){
            var numberOfLinks = this.$links.length;
            if ( numberOfLinks > 0 ){
                section = this.$links[ numberOfLinks - 1].hash;
            }
        }

        // The current section or the first link if it is found
        return section || ((this.$links.length===0) ? (null) : (this.$links[0].hash));

please consider adding this to the next version of the plugin

Thank you

Prevents linking to other pages from the navigation

If I apply the singlePageNav function to a navigation that also links to other pages (not just sections on the current page), then single Page nav seems to prevent accessing the other page. Is there a solution to this?

Offset is ignored when accessing section directly

Hi Chris,
the browser seems to ignore offset when I'm accessing to certain section directly via link or URL. When I'm using navigation menu for this, the offset works fine. I've tried same thing using your live demo and get the same results.

For exapmle: When I click on Section 2, it navigates me correctly to a section 2 + offset, but when I enter the address manually (http://chriswojcik.net/demos/single-page-nav/#section2) and press enter, it navigates me to the section 2 as well, but in this case without offset.

Is there any solution, how to get correct position in both cases?

Hero section not a section

I have a hero section on my site, which there is no link for. Should I scroll down to the next section, and scroll back up to the hero section, the next section stays as the active item.

Is there any quick fix for this?

Non-webkit browsers ignore the offset amount

It appears that browsers other than webkit (Chrome and Safari) just ignore the offset that is being set on the object. I have a header that is 250px high and I need the content to flow underneath it but stop just below it when a link in the navigation is clicked. So I set the offset to 250px. The header logo, when clicked, will scroll the content all the way back to the "home section", but it is supposed to stop just below the header, not scroll all the way to the top of the window.

With the content scrolled to the top so that the "home page" content is partially visible (see the IE screenshot), I can click the logo and the content will scroll down (out from under the header that is covering it) and then snap back up to the top of the document window, as if the browser is allowing the JS to scroll the content to any position it wants, but then overrides it and places the content at the very top of the window.

Since the content scrolls "underneath" my 250px high header, this causes some problems. It works great in Chrome and Safari, just not FF and IE.

See screenshots:

Add active to li instead of a

Hello,

as I wrote in the title, the active class is added to a, please correct me if I am wrong.
How can I add it to the li instead of a?

Example with actual code:
< li>
< a href="#home" class="active">Homepage
< /li>

How can I modify to have this?
< li class="active">
< a href="#home">Homepage
< /li>

Goto Anchor

Not an issue. I added additional pages using same template. I would like to call these pages without hashtag in the URL, but have the page scroll down to the hashtag onload. Normally this can be done using jQuery, but the jQuery does not work in this case as your jQuery overrides it. Doable?

Demo doesn't work, looks like it's spam

The demo site: http://chriswojcik.net/demos/single-page-nav/ is spam it takes you to advertisement page.

Question

Hi Chris, thanks for the awesome job, I'm trying to change the size in px of the offset option. but I cant find where. Would you help me out?

Thanks a bunch!

Fernando

Bower Support?

Could you publish this out to bower? http://devhike.blogspot.com/2013/06/how-to-register-your-library-or.html

External Link not working

I have a external link blog, and contact, navigation is working fine and scrolling nicely but when i click on blog and contact it did't go to their external page.

// The actual plugin
$('#nav').singlePageNav({
offset: $('.navigation-box').outerHeight(),
filter: ':not(.external)',
currentClass: 'hover-class',
updateHash: true,
beforeStart: function () {
console.log('begin scrolling');
},
onComplete: function () {
console.log('done scrolling');
}
});

Easing option

Hi Chris!
First of all, many thanks for this pretty cool jquery plugin!
It's just what I need.

I'm using jquery.easing.1.3.js plugin and I would like to insert easing option on the animation speed, like: easing:'easeInOutExpo'
Is it possible?
Could you tell how to do that?

thank's for your time

Using full url with # stops adding the current class .

Hello Chris
When i change the url for example "#section1" to "http://localhost/project/#section1" it stops adding current class to that menu item when clicked or scrolled to that related section. Will you please provide any solution for this.
Thank you.

Npm Support?