jbutko / stickynavbar.js Goto Github PK

Hello sir,
1st of all thnks a lot for such a nice script .

I have a very little issue.
even though I am giving false value to

         animateCSSRepeat: false, // Repeat animation everytime user scrolls

it animates my menu every time I scroll down .
Please solve this issue asap and reply me.

Thank You so much.

Last section isn't tall enough to register that it has been scrolled to, which results in the item not being highlighted at all.

Hi @jbutko ,
I'm a member of cdnjs. I found that there is jquery.stickyNavbar.css on github repo but this file has not been published on NPM. Is it correct?
I'd like to confirm if jquery.stickyNavbar.css need to be added in cdnjs. If yes, I will fetch jquery.stickyNavbar.css from github repo for the current versions and set npm auto-update config for the future update. I suggest to also publish jquery.stickyNavbar.css on NPM in the future versions because we prefer to use npm auto-updater in cdnjs.
Thank you.

cdnjs/cdnjs#8413

Looks like you have it were the links are set to e.preventDefault(); Is there a way that you can have this turned off if you are using other types of links besides achor links?

There have been times when stickyNavbar highlights two successive sections. Basically two anchors have the active class applied at the same time. Manually scrolling up or down removes one or the other. Is there a reason\fix for this behaviour?

Hi, Great work on this script BTW, plays nicely with what I'm building. One thing though, links to other pages dont seem to work when combined with in-page links in same stuck element...Tried full paths too.

http://69.195.124.213/~gjdcorg/business.html

Hi @jbutko ,
We are cdnjs team and we want to host the library.
I found that the latest version on GitHub is v1.3.2 but on NPM is v1.2.1. Could you please publish the latest versions on npm to make it consistent? Thank you.

cdnjs/cdnjs#8413

Is it possible to attach a special class on elements when the sticky nav is activated?

hello
how to add class to #header when active / scroll navbar ?

The nav bar disappears after scrolling down. It's fine at first, but when the nav bar reaches the top of the viewport it just disappears. Bug or am I doing something wrong? I followed the instructions.

edit: fixed it, nevermind...!

Will there be support for using drop-down navigation bars? To construct a Bootstrap navigation bar the parent dropdown item must include a link, which results in an error in the console.
HTML:

<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Parent</a>
							<div class="dropdown-menu"><a href="page.html" class="dropdown-item">Child</a><a href="page2.html" class="dropdown-item">child2</a> <a href="page3.html" class="dropdown-item">page 3</a></div>
						</li>

Error:

Uncaught TypeError: Cannot read property 'focus' of null
at HTMLHtmlElement.complete (jquery.stickyNavbar.min.js:23)
at HTMLHtmlElement.d.complete (jquery.js:6693)
at j (jquery.js:3099)
at Object.fireWith [as resolveWith] (jquery.js:3211)
at i (jquery.js:6569)
at n.fx.tick (jquery.js:6858)

Unlike your demo page, I don't have a home so I can't manually add .active class on the first child so I don't have a workaround here.
When I clicked on my first child link for the first time, it scrolls to that section but no class where added. But if you click other than the first child link, and click the first child link, the active class is there.

When the navbar is not fixed (i.e. the screen size is small) and you click on a menu item to scroll to its corresponding section, the top of that section is not flush with the top of the page. Below, I clicked on "jQuery" and was taken to a spot just above the top of that section.

Sometimes the sticky nav does not work in Safari, it will only stick to the top and wont get unsticky,
once you refresh the page the functionality works as normal.

This happens like 50% of time when you try to fresh load the page on Safari.

https://www.netbaselive.com/la/

It work fine in all other browsers.

Console log shows no errors, any thoughts on what could be causing this problem?

I just tried out this plugin to get a sticky Navbar and I love it. Works quick and simple.
One issue I did run into though, just now, I am having share links in my header and when I try to click on them I get the following exception:

Uncaught Error: Syntax error, unrecognized expression: http://twitter.com/home?status=Check%20out%20this%20Article+http://178.62.11.224:3000/blog/post/elkanns-boosts-family-feel jquery-2.1.1.min.js:2
fb.error jquery-2.1.1.min.js:2
fb.tokenize jquery-2.1.1.min.js:2
fb.select jquery-2.1.1.min.js:2
fb jquery-2.1.1.min.js:2
n.fn.extend.find jquery-2.1.1.min.js:2
n.fn.init jquery-2.1.1.min.js:2
n jquery-2.1.1.min.js:2
(anonymous function) jquery.stickyNavbar.js:102
n.event.dispatch jquery-2.1.1.min.js:3
r.handle jquery-2.1.1.min.js:3

Is there any way to fix this?

I keep getting this error where it says "v=h.offset().top+h.outerHeight(!0);" in all of the major browsers. Causes an error in the development console.

Line 99:

sectionOffsets[sections[i].id] = sections[i].offsetTop;

offsetTop fetches the element relative to the top of the nearest relatively positioned element, not relative to the document. If you by chance have a relatively-positioned element in between your navbar and your sections, this causes the scrollto functionality to scroll to the incorrect location.

This can be fixed by using getBoundingClientRect().top (or .y) instead:

sectionOffsets[sections[i].id] = sections[i].getBoundingClientRect().top;

Perhaps add a setting for DOM-absolute or relative offsets also, if you consider this a breaking change (I don't think it should be, but I can't test all use cases).

Would you be able to fix this (alternatively I can make a PR) and push a new release to packagist? Thanks!

When I scroll down past the navbar, it jumps significantly farther than a single scroll should go. This causes the navbar to cover my section's header unless I have a huge padding at the top of the section. Is there any way to remove this jumping behavior?

Hello,
this line of code does not check for relative links:
if (href.substring(0, 4) === 'http' || (href.substring(0, 5) === 'https' || href.substring(0, 7) === 'mailto:' || href.substring(0, 1) === '/')) { return true; }
Adding a new check:
|| href.substring(0, 3) === '../' fixes the issue.

Scrolling position is not consistent between FF + Chrome vs IE, and has some issues.

Please check out [website removed] -- maybe you can figure out what's happening.

I have had to set one of the "anchors" to a link in the previous section when clicking the "About Hypnotherapy" as a hack to prevent it scrolling too far down the page.

Note: I love this plugin, good job.

Just the title 👍

If I resize the browser window to under 480px, it is not working.

so my question is how can I make it work in mobile window too?

First of all, thanks for this great plugin, it's the only one I found (tried like 10) that didn't mess up the default position when resizing the window. However, there is a problem that's rather easy to fix. The code is only executed when you scroll. So, when you hit F5, the content of the page the browser automatically scrolls to the previous location but the sticky element isn't applied because it currently listens only to the .scroll event. This can be fixed by executing the same code that is in the $(window).scroll(...) function also at $(window).ready(...). I added it to the bottom and it works fine now.

I'm not entirely sure what startAt is doing
"Stick the menu at XXXpx from the top of the this() (nav container)"

I expected that this would start the sticky element at XXXpx from the top, but setting this means that the element you want to stick is scrolled over for the first XXXpx until it actually works. So, I changed a few things to get what I want:

            /* 1.) As soon as we start scrolling */
            if (windowPosition >= $selfScrollTop - options.startAt) {

            /* 3.) As soon as we get back to the top of the page */
            /* If top of the window is over this() (nav container) */
            if (windowPosition + options.startAt <= $selfScrollTop) {

Now, I don't know what the expected behavior is but if the current implementation is correct, can we get something like this added?

I realy like this but i can't get the behavior of the first div below #header and nav.
There is allways a margin above that div when navigating from bottom to the fist div below the nav div
The margin seems to be the same as the #header itself.

This issue is also in your example
First navigate to the section contact an then to section downloads

is there a sollution for this?

thanks, Richard

Hey there, mainly stumbling over it through a jQuery version update in the latest WordPress 4.5, I realised your plugin is affected by a weak declaration including the hash character which should be escaped:

li a[href*=#] should be changed to li a[href*='#']

accordingly in order to work with the latest jQuery 1.x version. I added it manually in my local copy, but it would surely be nice to have it officially available through your repository 😉 .

The link to the home page for the plugin is broken.

I am only able to add absolute links. If they are relative I get the following two errors.

Uncaught TypeError: Cannot read property 'substring' of undefined. StickyNavbar.min.js:23
jquery.stickyNavbar.min.js:23 Uncaught TypeError: Cannot read property 'focus' of null: StickyNavbar.min.js:23

Demo webpage gives a 404 Page not found error.

Hi,
this is a feature request. Is it possible to let the script add a specified class to the target element when it's in "sticky" mode? At this point the plugin only set top, position and z-index properties but we could style the navbar differently according to its status and a class would be a convenient way.

If my page is scrolled down and I refresh the page, the navbar is something just randomly in the middle of the page.

Here you can see the signup button, etc in the middle of the page.

There is a different version of stickynavbar listed on a CDN on your web page. http://www.jozefbutko.com/stickynavbar/ 1.1.2 and the current version is 1.3.2. This could throw things off. Can this be updated?

Currently it's hardcoded at 480px (while the setting says 496px). Please add an option to change this width to make it more adaptable to responsive designs.

Hello

Thank you for your plugin. I chose this because it has a github account and I like to track the plugins.

It works very nicely but I would like to suggest an improvement, because if you're calling stickyNavbar in a page that could have only the unsticky mode (eg: resolution bigger doesnt' display scroll), there is an Uncaught TypeError: Cannot read property 'top' of undefined

I just added this condition
if(typeof lastSection !== 'undefined'){
on line 201 before // grab bottom position of last section
and closed it on line 255 after } // ( windowPosition <= $selfScrollTop ) end

Is there a way to add margin top the next section so when menu stick on top it doesn't jump up?

Looking at the demo on the web site: http://www.jozefbutko.com/stickyNavbar/

The menu is repeating the animation every scroll event, even though this is set to false?

This causes it to flicker like a strobe light when scrolling down the page.

Could I change "nav bar position" style to vertical (not top)?

Body Markup    |   Navigation
..........               | .............
..........               | .............
..........               | .............

First of all awesome plugin. love the ease of use, but I was wondering (if it isn't possible already- if so please show how) if the sticky navigation bar could be enabled on demand. For example, If I scrolled down but not far enough to trigger the sticky mode, it would be nice if there could be a call or something to trigger it on demand and have the navigation bar stick at the top like it would when scrolled down far enough.
If this is already possible, please show how :)

Thanks for your time in making an awesome plugin

If I have this embedded in my navbar:

<a href="/missions/foo/edit"><i class="fa fa-pencil"></i></a>

This won't work because it's a relative URL, and the script throws:

Error: Syntax error, unrecognized expression: /missions/foo/edit

The problem seems to be coming from this line in stickyNavbar.js:

if ("http" === c.substring(0, 4) || "mailto:" === c.substring(0, 7)) return !0;

This looks like a faulty check. Can you simply not check if the URL does not contain a # symbol?

In the mean time, any suggestions on how to workaround this?

http://api.jquery.com/outerwidth/

This method is not applicable to window and document objects; for these, use .width() instead