Side menu position crash on Edge

[Lara Vieira]

In the code of side-menu you have been writing:

<div id="doc-nav" class="doc-nav">
    <nav id="doc-menu" class="nav doc-menu flex-column sticky">
        .....
    </nav><!--//doc-menu-->
</div><!--//doc-nav-->

And on the Javascript code you have been writing:

/* ===== Stickyfill ===== */
var elements = $('.sticky');
Stickyfill.add(elements);

/* Activate scrollspy menu */
$('body').scrollspy({target: '#doc-menu', offset: 100});

Everything works ok for Google Chrome (cause it have support for sticky position and Stickyfill stay sleep), but on Edge the position of the side-menu escape the page. I think this is caused by Scrollspy of Bootstrap that ask for "position: relative" of side-menu when the menu is set to "position: sticky" with Stickyfill working (the Edge don't support yet sticky position).

To do side-menu works fine with Stickyfill and Scrollspy together I added a div to separate the position setting for Stickfill and the position setting for Scrollspy, like this:

<div id="doc-nav" class="doc-nav">
    <div class="sticky">
        <nav id="doc-menu" class="nav doc-menu flex-column">
            .....
        </nav><!--//doc-menu-->
    </div>
</div>

With this code the Stickyfill works on div doing sticky position support and, separately, Scrollspy get relative position of nav element.

The Bootstrap 4 documentation ask us to set the relative position for the menu explicitly in css (sass file in this case), but I did not do it on this example because relative position is the default. For my application, I have declared relative position in .doc-menu class in _doc.scss file.

The Javascript code part is here only to show that Scrollspy and Stickyfill is working on the same element (both "#doc-menu" and ".sticky" go to the same element "nav"), I don't change any Javascript code.

I think I will help someone with this issue post and, if something I have placed here is wrong or incomplete, please tell me, I'm here to learn first at all.

Scrollspy docs by Bootstrap 4.