Making Bootstrap Navbar work well with Scrollspy

This solved many issues I was having with Scrollspy and Bootstrap navbar. V2 adds some perhaps redundant code but it clears out a funky navbar flicker that I noticed on chrome. This new version also works well with a top and bottom nav.

by Adam Calihman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="12" class="scrollspy">
    <div class="container">
        <div class="row">
            <nav id="myScrollspy" class="navbar navbar-default navbar-fixed-top">
                <div class="navbar-header"> <a class="navbar-brand" href="index.php"><span>Foobar Productions</span></a>

                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"><span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                    </button>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li class=""><a data-toggle="collapse" data-target=".navbar-collapse" href="#section1">I'll</a> 
                        </li>
                        <li class=""><a data-toggle="collapse" data-target=".navbar-collapse" href="#section2">Be</a>
                        </li>
                        <li class=""><a data-toggle="collapse" data-target=".navbar-collapse" href="#section3">Back</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div id="section1">
            <div class="row">
                 <h1 class="text-center">Terminator</h1>

            </div>
            <div class="row">
                <img src="http://upload.wikimedia.org/wikipedia/en/thumb/7/70/Terminator1984movieposter.jpg/220px-Terminator1984movieposter.jpg" alt="Terminator" class="pic">
            </div>
        </div>
       ...

CSS

body {
    position: relative;
}
.pic {
    margin-left: 50px;
}
.navbar {
    padding: 15px;
}

JavaScript

/** First portion from http://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
 * or http://jsfiddle.net/ianclark001/aShQL/
 *Works for anchor tags in gerneal - doesn't relate to scrollspy
 * Check a href for an anchor. If exists, and in document, scroll to it.
 * If href argument ommited, assumes context (this) is HTML Element,
 * which will be the case when invoked by jQuery after an event
 */
function scroll_if_anchor(href) {
    href = typeof(href) == "string" ? href : $(this).attr("href");
    
    // You could easily calculate this dynamically if you prefer
    var fromTop = 56;
    
    // If our Href points to a valid, non-empty anchor, and is on the same page (e.g. #foo)
    // Legacy jQuery and IE7 may have issues: http://stackoverflow.com/q/1593174
    if(href.indexOf("#") === 0) {
        var $target = $(href);
        
        // Older browser without pushState might flicker here, as they momentarily
        // jump to the wrong position (IE < 10)
        if($target.length) {
            $('html, body').animate({ scrollTop: $target.offset().top - fromTop });
            if(history && "pushState" in history) {
                history.pushState({}, document.title, window.location.pathname + href);
                return false;
            }
        }
    }
}    

// When our page loads, check to see if it contains and anchor
scroll_if_anchor(window.location.hash);

// Intercept all anchor clicks
$("body").on("click", "a", scroll_if_anchor);


//  Hides navbar-collapse after click
$('.nav a').click(function(){
    $('.navbar-collapse').collapse('hide');
});



/** New section - specific js to enhance scrollspy functionality
 * from https://jsfiddle.net/mekwall/up4nu/
 * Cache selectors 
 */
var lastId,
topMenu = $("#myScrollspy"),
    topMenuHeight = topMenu.outerHeight() + 32,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems =...