CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapinternet-explorermicrosoft-edge
Marco
Marco

Reputation: 23

Bootstrap Nav not working correctly in MS Edge/IE

I created a website with a navigation under the header. When scrolling over the navigation its position gets fixed at the top and its color changes.

Everything works fine in Chrome and Firefox but in Edge or Internet Explorer the navigation changes color everytime the user scrolls.

The CSS for the inverted navbar:

.top-nav-invert {
  z-index: 99;
  background-color: #fff;
  height: 80px;
  border-bottom: 1px solid #ededed;
  -webkit-box-shadow: 0px 1px 8px 0px rgba(68, 68, 68, 0.07);
  box-shadow: 0px 1px 8px 0px rgba(68, 68, 68, 0.07);
}

.top-nav-invert a {
  color: #000 !important;
  -webkit-transition: all 1s;
  transition: all 1s;
}

JS:

    if ($(".navbar").offset().top > 320) {
      $(".navbar").addClass("top-nav-invert");
    } else {
      $(".navbar").removeClass("top-nav-invert");
    }

To better understand what I did, I put the rest of the code into a codepen:

http://codepen.io/marcomai/pen/OMjgXp

Why is this a problem in IE and what could I do?

Upvotes: 2

Views: 1784

Answers (1)

Sampson
Sampson

Reputation: 268344

I'm going to take a closer look at this issue, and see if we can identify areas of improvement of the Microsoft Edge team to make. In the meantime, I was able to confirm that a quick debounce will result in a much better experience.

Instead of having the following:

$(window).on("scroll", function () {
    /* Logic Here */
});

Do the following:

var debounce;

$(window).on("scroll", function () {
    clearTimeout( debounce );
    debounce = setTimeout(function () {
        /* Logic Here */
    }, 50);        
});

In the meantime, I'll continue to look into this demo.

Upvotes: 1

Related Questions