Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Cody House On-Scroll Nav (Mobile Solution)

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #263037
    cives
    Participant

    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!

    #263041
    Shikkediel
    Participant

    What 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.

    #263045
    cives
    Participant

    Generally 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!

    #263053
    Shikkediel
    Participant

    I’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.

    #263084
    cives
    Participant

    Hi 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?

    #263085
    Shikkediel
    Participant

    Maybe 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.

    #263086
    cives
    Participant

    link 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.

    #263087
    cives
    Participant

    link 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.

    #263091
    Shikkediel
    Participant

    This 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.

    #263153
    cives
    Participant

    jQuery(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..

    #263154
    Shikkediel
    Participant

    The CSS width of an iPhone is 375 pixels…

    https://mydevice.io/devices/

    #263155
    cives
    Participant

    Interesting, it didn’t work at 375, but problem solved at 300! Thanks!

    #263156
    Shikkediel
    Participant

    Glad you got it solved, cheers.

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.