Scrollspy Boostrap [closed]

Navigation
-3

Hello, following the Bootstrap 4.0-beta documentation, and with difficulty executing a simple "Scrollspy", I would love to learn, to follow their examples, but it does not work anyway ... link

Could someone give me an example done, of the "Example in navbar" link above, so I can understand the operation right? Thank you

    
asked by anonymous 15.11.2017 / 01:12

1 answer

1

The possibility of not working for you is due to lack of one of these requirements:

  • Required util.js (if you compiled bootstrap.js via source)
  • Must be used with nav component or with the list group component.
  • Requires position: relative; in the element that will 'roll', usually <body>
  • When scrolling / exiting for elements that are not in <body> you will need to apply height and overflow-y: scroll; (for example a sub-element)
  • Links / anchors ( <a> ) are required and should point to an element with id="..."

Example with navbar (not <body> )

As I said before, you should apply position: relative; to <body> (in tests I did not need, but may vary according to DOCTYPE or browser), eg: 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
   <style>
   body {
      position: relative;
   }
   </style>
</head>

<body data-spy="scroll" data-target="#navbar-example2" data-offset="0">

    <nav id="navbar-example2" class="navbar navbar-light bg-light fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <ul class="nav nav-pills">
        <li class="nav-item">
          <a class="nav-link" href="#guilhermenascimento">@guilhermenascimento</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#bootstrap">@bootstrap</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#foo">foo</a>
            <a class="dropdown-item" href="#bar">bar</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#baz">baz</a>
          </div>
        </li>
      </ul>
    </nav>

    <h4 id="guilhermenascimento">@guilhermenascimento</h4>
    <p>...</p>
    <h4 id="bootstrap">@bootstrap</h4>
    <p>...</p>
    <h4 id="foo">foo</h4>
    <p>...</p>
    <h4 id="bar">bar</h4>
    <p>...</p>
    <h4 id="baz">baz</h4>
    <p>...</p>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <script type="text/javascript" src="http://getbootstrap.com/assets/js/docs.min.js"></script></body></html>

Inasub-element(<section>)

Anexampletestwithfixedheightandscroll:

.scrollspy-exemplo {
    position: relative;
    height: 200px;
    margin-top: .5rem;
    overflow: auto;
}
.simular-text-grande {
    height: 400px;
}
<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#guilhermenascimento">@guilhermenascimento</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#bootstrap">@bootstrap</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#foo">foo</a>
        <a class="dropdown-item" href="#bar">bar</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#baz">baz</a>
      </div>
    </li>
  </ul>
</nav>

<section class="scrollspy-exemplo" data-spy="scroll" data-target="#navbar-example2" data-offset="0">

    <h4 id="guilhermenascimento">@guilhermenascimento</h4>
    <p class="simular-text-grande">...</p>
    <h4 id="bootstrap">@bootstrap</h4>
    <p class="simular-text-grande">...</p>
    <h4 id="foo">foo</h4>
    <p class="simular-text-grande">...</p>
    <h4 id="bar">bar</h4>
    <p class="simular-text-grande">...</p>
    <h4 id="baz">baz</h4>
    <p class="simular-text-grande">...</p>

</section>

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    
16.11.2017 / 01:44
How long is the Google Play developer account [closed] Doubts with .CSS [closed]