jQuery.Pin is an excellent jQuery script to pin any element to the top of a container.
In this article I shall go over implementing jQuery.Pin in WordPress to make Primary Navigation menu and a widget in News Pro (a Genesis child theme) stick to the top of screen as the rest of the page content gets scrolled.
Screenshot:
Screencast:
Download jquery.pin.js and upload it to /js directory under the child theme.
Create a file named jquery.pin.init.js having the following code and upload it to /js directory:
Wow … stunning work as usual Sridhar. I enjoy the feeds you send out, and save them for later follow up each time.
is responsive not valid
regards
Sridhar – thanks for the great, detailed write up. Quick question – how would one disable this feature for viewing via phone? Thanks
minWidth attribute can be used. See http://webpop.github.io/jquery.pin/.
Sridhar where do I paste this code:
$(“.pinned”).pin({
minWidth: 940
})
In the functions.php of my child theme? Thanks!
No. In jquery.pin.init.js
Like this: http://pastebin.com/raw.php?i=L38bbztK
Thank you!
[…] In the past I showed elements like header and navigation can be made to stick to top of page when the user scrolls past using jQuery script and jQuery.Pin. […]
Hi Sridhar. In my website link for this comment I am having an issue with the sticky .nav-primary on mobile views. Both the landscape iPhone and iPad in particular. Could you please give me some feed back on this? Thanks! http://highnotedesigns.com/client2/
I think you answered my question in your last comment. thanks so much!
Sorry to bug you. I still have an issue where the navigation bar only goes halfway across the screen on 480px wide view.
That code did the trick. thanks!
Two questions:
1. Sticky menu works beautifully but only the active navigation element is opaque; other elements are transparent except for white text with a thin text shadow and divider. Something in my CSS is obviously getting overridden but I’m not sure what,
2. This works in IE11 but not my latest version of chrome: Chrome Version 34.0.1847.116 m.
I’ve got this working successfully but it’s transparent, even with the background and/ or background-color set.
Any suggestions on how to use CSS to make sure the menu sticks on top and everything on the page goes beneath it instead of over it at the top? I tried opacity too, that didnt’ work.
http://chrsiminc.wpengine.com
Thanks,
Kevin
I was able to get this working (and it works great! ..for the most part).
My problem is that on my site, you are able to click a “more” button, and it loads more posts below it dynamically. The problem is, once you scroll up “further” than the original page height, the menu disappears, and stays static at the top of the page. If you scroll back down to where it thinks the “top” of the page is, it happily sticks itself back in place properly.
My site is bitbyagrue.com
I have poked around the JS a slight bit, but I’m really not all that good with JS, so I’m not sure what I would even be looking for to fix.
Cheers,
– Morghan.