Forums

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

Home Forums CSS Cody House Nav Doesn't Function in IE

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

    Hi all – unfortunately I am a bit tied down to this script: https://codyhouse.co/gem/full-screen-pop-out-navigation/ for my site’s navigation. I’m pretty far in the development process to restructure the navigation. It works fine, however I can’t get it to function properly in IE.

    The point of the script is to only reveal nav when the user scrolls up, when in IE, it shows briefly, then hides instantly.

    My initial thought is it has something to do with this CSS:

    .cd-header.is-visible {
    /* if the user changes the scrolling direction, we show the header */
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    z-index:1000;
    }

    I suppose this could also be a JS issue?

    Thoughts? Here is a link to the site I am developing: http://697792-hs-sites-com.sandbox.hs-sites.com/home

    Thanks!

    #265198
    Shikkediel
    Participant

    I’m on a Windows 7 machine with IE11 and that seems to work fine…

    #265199
    cives
    Participant

    Im running IE11 as well, the nav bar remains visible for you on scroll up? For me it instantly hides itself. On scroll up, it is supposed to reveal, and then remain visible. If you compare with chrome or safari you could get a better sense of how it should function.

    #265200
    Shikkediel
    Participant

    Yes, it stays visible when scrolling up. I’m quite familiar with this kind of sticky header script and functionality. Don’t know what would be different in your setup.

    #265202
    cives
    Participant

    Ok – I’ve narrowed the cause of the problem down to Windows 10, with IE11. Any ideas why windows 10 would be the route of the problem?

    #265203
    Shikkediel
    Participant

    I couldn’t say without testing, IE has always had annoying scrolling quirks. I’d recommend logging currentTop and previousTop to the console to see what is actually happening to the values and go from there (I would check myself but don’t have W10 running on anything)…

    #265217
    Shikkediel
    Participant

    Making a wild guess though, I’d think it double fires at the end.

    Edited – proposed code would also get triggered when not going up…

    #265218
    Shikkediel
    Participant

    Theorecially, this should solve that (provided my brain got wired correctly this time):

      if (currentTop < this.previousTop ) {
      }
      else if (currentTop != this.previousTop) {
      }
    
    #265228
    cives
    Participant

    Shikkediel – Thanks for working through this with me. I don’t doubt that you have a solution there, though I’m not sure I am up-to-speed enough with JS to know where to implement your solution.

    Would you mind sharing where in the JS to insert that?

    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 = 300;
    //primary navigation slide-in effect
    if ($(window).width() > MQL) {
    var headerHeight = $(‘.cd-header’).height();
    $(window).on(‘scroll’, {
    previousTop: 0
    }, function() {
    var currentTop = $(window).scrollTop();
    //check if user is scrolling up

    if (currentTop 0 && $(‘.cd-header’).hasClass(‘is-fixed’)) {
    $(‘.cd-header’).addClass(‘is-visible’);
    } else {
    $(‘.cd-header’).removeClass(‘is-visible is-fixed’);
    }
    } else {
    //if scrolling down…
    $(‘.cd-header’).removeClass(‘is-visible’);
    if (currentTop > headerHeight && !$(‘.cd-header’).hasClass(‘is-fixed’)) $(‘.cd-header’).addClass(‘is-fixed’);
    }

    this.previousTop = currentTop;

    });
    }
    //open/close primary navigation
    $(‘.cd-primary-nav-trigger’).on(‘click’, function() {
    $(‘.cd-menu-icon’).toggleClass(‘is-clicked’);
    $(‘.cd-header’).toggleClass(‘menu-is-open’);
    //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden
    if ($(‘.cd-primary-nav’).hasClass(‘is-visible’)) {
    $(‘.cd-primary-nav’).removeClass(‘is-visible’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function() {
    $(‘body’).removeClass(‘overflow-hidden’);
    });
    } else {
    $(‘.cd-primary-nav’).addClass(‘is-visible’).one(‘webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend’, function() {
    $(‘body’).addClass(‘overflow-hidden’);
    });
    }
    });
    });

    #265232
    Shikkediel
    Participant

    Let me make a variation while I’m at it (middle block of what you’ve posted):

    if ($(window).width() > MQL) {
      var headerHeight = $(".cd-header").height();
      $(window).on(
        "scroll",
        {
          previousTop: 0
        },
        function() {
          var currentTop = $(window).scrollTop();
          //leave the function if there is no change
          if (currentTop == this.previousTop) return;
          //check if user is scrolling up
          else if (currentTop < this.previousTop) {
            //if scrolling up...
            if (currentTop > 0 && $(".cd-header").hasClass("is-fixed")) {
              $(".cd-header").addClass("is-visible");
            } else {
              $(".cd-header").removeClass("is-visible is-fixed");
            }
          } else {
            //if scrolling down...
            $(".cd-header").removeClass("is-visible");
            if (currentTop > headerHeight && !$(".cd-header").hasClass("is-fixed"))
              $(".cd-header").addClass("is-fixed");
          }
          this.previousTop = currentTop;
        }
      );
    }
    

    I’ve added a line after “//leave the function if there is no change”… no need to go through the rest if the scrolling position is the same. You’re code snippet doesn’t look right by the way, I’m assuming it’s because of a copy and paste.

    #265233
    cives
    Participant

    Shikkediel, I can’t thank you enough! Spent a lot of time on this and that seemed to have worked.

    Cheers!

    #265234
    Shikkediel
    Participant

    Excellent. :-)

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