Bootstrap JS Scrollspy进入Bootstrap面板 [英] Bootstrap JS Scrollspy into a Bootstrap panel

问题描述

将Bootstrap JS Scrollspy添加到Bootstrap面板时，我遇到了一些问题。我想要一个固定的Nav进入面板，如 W3School示例 。
如果我尝试设置固定导航，我的navabr会进入真正的导航栏位置。
我不知道如何为它设置好的选项，我的面板有一个固定的高度，所以我必须允许溢出。

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 goes into the real navbar position. I don't know how to set up good options to it, my panel has a fixed height so i have to allow overflow.

$(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 behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var 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
  });
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<!--REAL MENU-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Real Navbar Title</a>
    </div>
    <div class="collapse navbar-collapse" id="navBar">
      <ul class="nav navbar-nav">
        <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
      </ul>
    </div>
  </div>
</nav>
<!--END FAKE MENU-->



  <kbd>OTHER PANEL AND EXTC...</kbd>



<div class="container-fluid" style="max-height: 10;">
<div class="panel panel-primary">
  <div class="panel-heading">
    <span class="glyphicon glyphicon-search"></span>
    Header
  </div>
  <div class="panel-body">
    
    
    
    
    <div id="fakeBody" data-spy="scroll" data-target="#navbarPnlBody" data-offset="">
      <nav id="navbarPnlBody" class="navbar navbar-default navbar-static">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#pnlNavBar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Navbar Title</a>
          </div>
          <div>
            <div class="collapse navbar-collapse" id="pnlNavBar">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#section1">Section 1</a></li>
                <li><a href="#section2">Section 2</a></li>
                <li><a href="#section3">Section 3</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>

      <div id="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>
      <div id="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>
      <div id="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>

推荐答案

将此添加到真正的导航栏div：

Add this to the real navbar div:

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

你应该得到：

$(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 behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var 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
  });
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<!--REAL MENU-->
<nav class="navbar navbar-default" style="position: fixed; width: 100%; z-index: 1;">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Real Navbar Title</a>
    </div>
    <div class="collapse navbar-collapse" id="navBar">
      <ul class="nav navbar-nav">
        <li><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
      </ul>
    </div>
  </div>
</nav>
<!--END FAKE MENU-->



  <kbd>OTHER PANEL AND EXTC...</kbd>



<div class="container-fluid" style="max-height: 10;">
<div class="panel panel-primary">
  <div class="panel-heading">
    <span class="glyphicon glyphicon-search"></span>
    Header
  </div>
  <div class="panel-body">
    
    
    
    
    <div id="fakeBody" data-spy="scroll" data-target="#navbarPnlBody" data-offset="">
      <nav id="navbarPnlBody" class="navbar navbar-default navbar-static">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#pnlNavBar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand">Navbar Title</a>
          </div>
          <div>
            <div class="collapse navbar-collapse" id="pnlNavBar">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#section1">Section 1</a></li>
                <li><a href="#section2">Section 2</a></li>
                <li><a href="#section3">Section 3</a></li>
              </ul>
            </div>
          </div>
        </div>
      </nav>

      <div id="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>
      <div id="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>
      <div id="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>

这篇关于Bootstrap JS Scrollspy进入Bootstrap面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！