Scrollify jQuery plugin has broken Bootstrap Scrollspy

Question

My Bootstrap Scrollspy was working perfectly until I added the JQuery script Scrollify. I had to change the JQuery script from slim.min.js to the min.js version but I don't think that is the problem.

           <div class="col-md-2 offset-md-2 d-block d-sm-none">
                <!--ScrollSpy nested navbar for mobile only-->
                <nav id="spynav-mobile" class="nav navbar-light bg-light">
                    <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="#item-1-">Me</a>
                    </li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-2-">Tech Challenge</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-3-">BBC Sport</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-4-">Student Mentor</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-5-">MTA Cert</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-6-">TeaFresh</a>
                    </li>
                </ul>
            </div>

The nav

                <div class="col-md-6 d-block d-sm-none">
                <!--ScrollSpy text for mobile-->
                <div id="scroll" data-spy="scroll" data-target="#spynav-mobile" data-offset="0">
                    <h4 id="item-1-">Me</h4>
                    <p>.....</p>
                </div>
            </div>

The text

The text div has the styles: {height: 80vh;, overflow y: scroll;}

The nav has the style: {height: 20vh;}

I cant think of anything I have changed other than adding the JQuery plugin and changing the JQuery script from slim to min. It worked perfectly before as I said.

Answer 1

I figured it out. Hope this can help someone in future.

standardScrollElements A CSS selector for elements within sections that require standard scrolling behaviour. For example standardScrollElements: ".map, .frame".

From the authors GitHub page https://github.com/lukehaas/Scrollify