jbutko / stickynavbar.js Goto Github PK
View Code? Open in Web Editor NEWstickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor link highlighting
Home Page: https://www.jozefbutko.com/stickynavbar/
License: MIT License
stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor link highlighting
Home Page: https://www.jozefbutko.com/stickynavbar/
License: MIT License
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?
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?
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.
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?
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
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
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?
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
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?
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...!
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.
Just the title ๐
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.
http://api.jquery.com/outerwidth/
This method is not applicable to window and document objects; for these, use .width() instead
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!
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 ๐ .
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.
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)
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
Is it possible to attach a special class on elements when the sticky nav is activated?
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?
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.
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
Last section isn't tall enough to register that it has been scrolled to, which results in the item not being highlighted at all.
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?
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.
Could I change "nav bar position" style to vertical (not top)?
Body Markup | Navigation
.......... | .............
.......... | .............
.......... | .............
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.
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.
hello
how to add class to #header when active / scroll navbar ?
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.
Demo webpage gives a 404 Page not found error.
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?
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.
The link to the home page for the plugin is broken.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.