Bootstrap Js Scrollspy Into A Bootstrap Panel

I have some problems when adding a Bootstrap JS Scrollspy into a Bootstrap Panel. I want a fixed Nav into the panel like W3School Example. If i try to set up fixed nav my navabr go

Solution 1:

Add this to the real navbar div:

style="position: fixed; width: 100%; z-index: 1;"

And you should get:

$(document).ready(function(){
  $('#fakeBody').scrollspy({target: "#navbarPnlBody", offset: 50});

  // Add smooth scrolling on all links inside the navbar
  $("#pnlNavBar a").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behaviorif (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hashvar hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('.scrollbar,#fakeBody').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)window.location.hash = hash;
      });
    }  // End if
  });
});

<linkhref="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><!--REAL MENU--><navclass="navbar navbar-default"style="position: fixed; width: 100%; z-index: 1;"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#navBar"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><ahref="#"class="navbar-brand">Real Navbar Title</a></div><divclass="collapse navbar-collapse"id="navBar"><ulclass="nav navbar-nav"><li><ahref="#"><spanclass="glyphicon glyphicon-home"></span> Home</a></li></ul></div></div></nav><!--END FAKE MENU--><kbd>OTHER PANEL AND EXTC...</kbd><divclass="container-fluid"style="max-height: 10;"><divclass="panel panel-primary"><divclass="panel-heading"><spanclass="glyphicon glyphicon-search"></span>
    Header
  </div><divclass="panel-body"><divid="fakeBody"data-spy="scroll"data-target="#navbarPnlBody"data-offset=""><navid="navbarPnlBody"class="navbar navbar-default navbar-static"><divclass="container-fluid"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#pnlNavBar"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><ahref="#"class="navbar-brand">Navbar Title</a></div><div><divclass="collapse navbar-collapse"id="pnlNavBar"><ulclass="nav navbar-nav"><liclass="active"><ahref="#section1">Section 1</a></li><li><ahref="#section2">Section 2</a></li><li><ahref="#section3">Section 3</a></li></ul></div></div></div></nav><divid="section1"class="container-fluid"><h1>Section 1</h1><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p></div><divid="section2"class="container-fluid"><h1>Section 2</h1><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p></div><divid="section3"class="container-fluid"><h1>Section 3</h1><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p><p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p></div></div></div></div></div>