Making Bootstrap Navbar work well with Scrollspy

ScrollSpy

by Raúl Rojas

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 class="KK">
  <div data-spy="scroll" data-target="#myScrollspy" data-offset="12" class="scrollspy">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <h3 id="top-menu">
    <a href="#section1">I'll</a>
</h3>


    <div id="section1">
      HHHH
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

  </div>

CSS

.KK {
  background: red;
  width: 200px;
  height: 400px;
  overflow: scroll;
}

JavaScript

function scroll_if_anchor(href) {
  href = typeof(href) == "string" ? href : $(this).attr("href");

  var fromTop = 150;
  if (href.indexOf("#") === 0) {
    var $target = $(href);
    if ($target.length) {
      $('html, body, .recordsList').animate({
        scrollTop: $target.offset().top - fromTop
      });
      if (history && "pushState" in history) {
        history.pushState({}, document.title, window.location.pathname + href);
        return true;
      }
    }
  }
}

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

// Intercept all anchor clicks
$(".recordsList").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 = menuItems.map(function() {
    var item = $($(this).attr("href"));
    if (item.length) {
      return item;
    }
  });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e) {
  var href = $(this).attr("href"),
    offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 55;
  $('html, body, .recordsList').stop().animate({
    scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function() {
  // Get container scroll position
  var fromTop = $(this).scrollTop() + topMenuHeight;

  // Get id of current scroll item
  var cur = scrollItems.map(function() {
    if ($(this).offset().top < fromTop) return this;
  });
  // Get the id of the current element
  cur = cur[cur.length - 1];
  var id = cur && cur.length ? cur[0].id : "";


});