0

I have an interactive menu on a website I am working on. The menu has absolute positioning on first load of the page, and then switches to fixed once you start scrolling. This works fine on Chrome, Safari, etc. but I recently discovered it is wonky on Firefox.

I think the problem is timing in Firefox and when I set a breakpoint in Firefox inspector before the script, the issue is fixed. So now I am trying to replicate that breakpoint in my code.

I tried to nest the entire function in a if statement which I was hoping would say "if on Firefox, wait 1 second before executing script, if on any other browser just execute the script"

    var menu = $('.header-container-wrapper');
    var timeout;

  if (navigator.userAgent.search("Firefox") >= 0) {

    function timeoutFunction() {
     timeout = setTimeout(firefoxFix, 1000); 
    }

    function firefoxFix(){    
               if (menu.length > 0) {
        var menu_offset = menu.offset();
        $(window).on('scroll', function () {
            if ($(window).scrollTop() > menu_offset.top) {
                menu.addClass('fixed-menu');
            } else {
                menu.removeClass('fixed-menu');
            }
        });
    }
    }
      } else { 
       if (menu.length > 0) {
        var menu_offset = menu.offset();
        $(window).on('scroll', function () {
            if ($(window).scrollTop() > menu_offset.top) {
                menu.addClass('fixed-menu');
            } else {
                menu.removeClass('fixed-menu');
            }
        });
    }
 }

This doesn't seemed to have worked because the problem still exists on Firefox while still not having any problems on Chrome.

P.S. I am not that knowledgable about JS so this could have been a very wrong attempt at trying to fix this.

Matt Grippo
  • 1
  • 2
  • The issue is likely to not be in the code you've provided. – evolutionxbox May 28 '19 at 15:29
  • Welcome to Stackoverflow. I hope you are able to admit that this: _**I recently discovered it is wonky on Firefox.**_ isn't the best problem description. The problem here is most likley related to the change in the containing node that happens with the transition from `absolute` to `fixed` - this is a CSS problem, not JavaScript. – Randy Casburn May 28 '19 at 15:43

0 Answers0