Home › Forums › JavaScript › Cody House On-Scroll Nav (Mobile Solution)
- This topic is empty.
-
AuthorPosts
-
November 28, 2017 at 7:00 am #263037civesParticipant
Hi all – wondering if anyone has had any success with this codyhouse nav: https://codyhouse.co/gem/full-screen-pop-out-navigation/
I’ve implemented it on my current site, but haven’t had much luck getting the nav to show on scroll up, from a mobile device.
I’m considering trying to implement “headroom.js” (http://wicky.nillia.ms/headroom.js/), but am wondering if there is a more simple solution… I’d rather alter the existing script than start from scratch.
Thanks!
November 28, 2017 at 8:55 am #263041ShikkedielParticipantWhat kind of mobile device? I know older OSes don’t fire scroll events while panning – and fixed position can be an issue too…
The script looks very straightforward otherwise. Quite nice how they keep the
previousTop
variable contained to the listener itself instead of making it more global. Gotta remember that. They don’t do any event throttling though, which is kind of a requirement for any decent script.November 28, 2017 at 1:17 pm #263045civesParticipantGenerally speaking, any modern smartphone. Testing on iPhone 8, with the newest OS installed, headroom.js works great on mobile, just uncertain as to how I would implement that into my codyhouse nav.
Thanks!
November 28, 2017 at 5:10 pm #263053ShikkedielParticipantI’m assuming you’ve noticed the basic script (not headroom.js) limits the execution to screen sizes above 1170 pixels at the very top? It’s a bit older code, from the time I was referring to when scroll events weren’t fired on mobile.
November 29, 2017 at 7:46 am #263084civesParticipantHi Shikkediel – Yes I have noticed that, though when I alter that media query to, say, 768-1024px, it still doesn’t function on mobile…
Thoughts?
November 29, 2017 at 8:12 am #263085ShikkedielParticipantMaybe you could link to the live example. I think that was as much as I could come up with theoretically…
Headroom looks a bit bulky for my taste, although if you’re not using jQuery on your site otherwise plain JS would actually save a few kB.
November 29, 2017 at 9:04 am #263086civesParticipantlink to stage site: http://697792-hs-sites-com.sandbox.hs-sites.com/home
Just want the same scroll up gesture to work on mobile, as it does on desktop.
November 29, 2017 at 9:04 am #263087civesParticipantlink to stage site: http://697792-hs-sites-com.sandbox.hs-sites.com/home
Just want the same scroll up gesture to work on mobile, as it does on desktop.
November 29, 2017 at 10:23 am #263091ShikkedielParticipantThis is what I see inside
main.min.js
:jQuery(document).ready(function(b){var c=1170;if(b(window).width()>c){
So it’s only executing the script on larger screen sizes.
November 30, 2017 at 11:14 am #263153civesParticipantjQuery(document).ready(function($) {
//if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don’t forget to update this value as well
var MQL = 1170;
//primary navigation slide-in effect
if ($(window).width() > MQL) {Changed MQL to 479… This made the nav work on ipad, but still not iphone… Grrr..
November 30, 2017 at 11:25 am #263154ShikkedielParticipantThe CSS width of an iPhone is 375 pixels…
November 30, 2017 at 11:33 am #263155civesParticipantInteresting, it didn’t work at 375, but problem solved at 300! Thanks!
November 30, 2017 at 11:35 am #263156ShikkedielParticipantGlad you got it solved, cheers.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.