Forums

This topic contains 11 replies, has 2 voices, and was last updated by  Shikkediel 1 year ago.

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)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star