¿Cómo establecer la propiedad de desplazamiento para ScrollSpy en Bootstrap?

Offset es una propiedad de Bootstrap Scrollspy en la que el usuario puede especificar los píxeles para compensar desde la parte superior al calcular la posición de desplazamiento. Se vuelve útil cuando el usuario siente que la barra de navegación o la lista cambia el estado antes de tiempo o cuando no se necesita mientras navega. Siempre es un número y el valor predeterminado es 10. El valor se puede cambiar a través de JavaScript o colocando el valor de compensación de datos en la etiqueta del cuerpo.

Sintaxis:

  • Declaración normal
    (body data-offset="")
  • Declaración de JavaScript
    $(document).ready(function(){
      $('body').scrollspy({target: " ", offset: });
    });
    

Ejemplo 1: este ejemplo describe la barra de navegación de arranque en la que se han utilizado cuatro secciones y la propiedad de desplazamiento se establece en 60 mediante JavaScript.

<!DOCTYPE html>
<html>
  
<head>
  <title>Bootstrap offset property</title>
  <meta charset="utf-8">
  <meta name="viewport" content=
    "width=device-width, initial-scale=1">
  <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
  </script>
    
  <style>
    body {
      position: relative;
    }
  
    #section1 {
      padding-top: 50px;
      height: 600px;
      background-color: #32CD32;
    }
  
    #section2 {
      padding-top: 50px;
      height: 600px;
      background-color: #FFFF00;
    }
  
    #section3 {
      padding-top: 50px;
      height: 600px;
      background-color: #00FF00;
    }
  
    #section4 {
      padding-top: 50px;
      height: 600px;
      background-color: #FF0000;
    }
  </style>
</head>
  
<body>
  <nav class="navbar navbar-dark bg-success 
          navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" 
            data-toggle="collapse" 
            data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          GeeksforGeeks
        </a>
      </div>
      <div>
        <div class="collapse navbar-collapse" 
            id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
            <li><a href="#section4">Section 4</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
  
  <div id="section1" class="container-fluid">
    <h1>Section 1</h1>
    <hr>
    <p>
      GeeksforGeeks is a computer science
      portal. It was created with a goal
      in mind to provide well written, well
      thought and well explained solutions
      for selected questions. The core team
      of five super geeks constituting of
      technology lovers and computer science
      enthusiasts have been constantly working
      in this direction.
      GeeksforGeeks is a computer science
      portal. It was created with a goal
      in mind to provide well written, well
      thought and well explained solutions
      for selected questions. The core team
      of five super geeks constituting of
      technology lovers and computer science
      enthusiasts have been constantly working
      in this direction.
    </p>
  </div>
  <div id="section2" class="container-fluid">
    <h1>Section 2</h1>
    <hr>
    <p>
      GeeksforGeeks is a computer science
      portal. It was created with a goal
      in mind to provide well written, well
      thought and well explained solutions
      for selected questions. The core team
      of five super geeks constituting of
      technology lovers and computer science
      enthusiasts have been constantly working
      in this direction.
      GeeksforGeeks is a computer science
      portal. It was created with a goal
      in mind to provide well written, well
      thought and well explained solutions
      for selected questions. The core team
      of five super geeks constituting of
      technology lovers and computer science
      enthusiasts have been constantly working
      in this direction.
    </p>
  </div>
  <div id="section3" class="container-fluid">
    <h1>Section 3</h1>
    <hr>
    <p>
      GeeksforGeeks is a computer science
      portal. It was created with a goal
      in mind to provide well written, well
      thought and well explained solutions
      for selected questions. The core team
      of five super geeks constituting of
      technology lovers and computer science
      enthusiasts have been constantly working
      in this direction.
      GeeksforGeeks is a computer science
      portal. It was created with a goal
      in mind to provide well written, well
      thought and well explained solutions
      for selected questions. The core team
      of five super geeks constituting of
      technology lovers and computer science
      enthusiasts have been constantly working
      in this direction.
    </p>
  </div>
  <div id="section4" class="container-fluid">
    <h1>Section 4</h1>
    <hr>
    <p>
      GeeksforGeeks is a computer science
      portal. It was created with a goal
      in mind to provide well written, well
      thought and well explained solutions
      for selected questions. The core team
      of five super geeks constituting of
      technology lovers and computer science
      enthusiasts have been constantly working
      in this direction.
      GeeksforGeeks is a computer science
      portal. It was created with a goal
      in mind to provide well written, well
      thought and well explained solutions
      for selected questions. The core team
      of five super geeks constituting of
      technology lovers and computer science
      enthusiasts have been constantly working
      in this direction.
    </p>
  
  </div>
  <script>
    $(document).ready(function () {
      $('body').scrollspy({
        target: ".navbar", offset: 50
      });
    });
  </script>
</body>
  
</html>

Producción:

Ejemplo 2: El ejemplo describe un grupo de listas de arranque en el que se han utilizado tres secciones y la propiedad de compensación se establece en 15 en la etiqueta del cuerpo.

<!DOCTYPE html>
<html lang="en">
  
<head>
  <meta charset="utf-8">
  <meta name="viewport" content=
      "width=device-width, initial-scale=1, 
      shrink-to-fit=no">
  
  <title>Bootstrap 4 ScrollSpy</title>
  
  <link rel="stylesheet" href=
  "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
  </script>
  <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
  </script>
    
  <style>
    body {
      position: relative;
      /* required */
    }
  
    .list-group {
      position: sticky;
      top: 20px;
    }
  </style>
</head>
  
<body data-spy="scroll" data-offset="20" 
  data-target="#myScrollspy">
    
  <div class="container">
    <h1>Bootstrap Scrollspy</h1>
    <br>
    <div class="row">
      <div class="col-sm-3" id="myScrollspy">
        <div class="list-group">
          <a class="list-group-item 
            list-group-item-action active" 
            href="#section1">Section One
          </a>
          <a class="list-group-item 
            list-group-item-action" 
            href="#section2">Section Two
          </a>
          <a class="list-group-item 
            list-group-item-action" 
            href="#section3">Section Three
          </a>
        </div>
      </div>
      <div class="col-sm-9">
        <div id="section1">
          <h2>Section One</h2>
          <p>
            GeeksforGeeks is a computer science portal. It was created with a goal
            in mind to provide well written, well thought and well explained solutions
            for selected questions. The core team of five super geeks constituting of
            technology lovers and computer science enthusiasts have been constantly 
            working in this direction. GeeksforGeeks is a computer science portal. 
            It was created with a goal in mind to provide well written, well thought 
            and well explained solutions for selected questions. The core team of five
            super geeks constituting of technology lovers and computer science 
            enthusiasts have been constantly working in this direction. 
            GeeksforGeeks is a computer science portal. It was created with a goal
            in mind to provide well written, well thought and well explained solutions
            for selected questions. The core team of five super geeks constituting of
            technology lovers and computer science enthusiasts have been constantly 
            working in this direction. GeeksforGeeks is a computer science portal. 
            It was created with a goal in mind to provide well written, well thought 
            and well explained solutions for selected questions. The core team of five
            super geeks constituting of technology lovers and computer science 
            enthusiasts have been constantly working in this direction.
          </p>
        </div>
        <hr>
        <div id="section2">
          <h2>Section Two</h2>
          <p>
            GeeksforGeeks is a computer science portal. It was created with a goal
            in mind to provide well written, well thought and well explained solutions
            for selected questions. The core team of five super geeks constituting of
            technology lovers and computer science enthusiasts have been constantly 
            working in this direction. GeeksforGeeks is a computer science portal. 
            It was created with a goal in mind to provide well written, well thought 
            and well explained solutions for selected questions. The core team of five
            super geeks constituting of technology lovers and computer science 
            enthusiasts have been constantly working in this direction.
            GeeksforGeeks is a computer science portal. It was created with a goal
            in mind to provide well written, well thought and well explained solutions
            for selected questions. The core team of five super geeks constituting of
            technology lovers and computer science enthusiasts have been constantly 
            working in this direction. GeeksforGeeks is a computer science portal. 
            It was created with a goal in mind to provide well written, well thought 
            and well explained solutions for selected questions. The core team of five
            super geeks constituting of technology lovers and computer science 
            enthusiasts have been constantly working in this direction.
          </p>
        </div>
        <hr>
        <div id="section3">
          <h2>Section Three</h2>
          <p>
            GeeksforGeeks is a computer science portal. It was created with a goal
            in mind to provide well written, well thought and well explained solutions
            for selected questions. The core team of five super geeks constituting of
            technology lovers and computer science enthusiasts have been constantly 
            working in this direction. GeeksforGeeks is a computer science portal. 
            It was created with a goal in mind to provide well written, well thought 
            and well explained solutions for selected questions. The core team of five
            super geeks constituting of technology lovers and computer science 
            enthusiasts have been constantly working in this direction.
            GeeksforGeeks is a computer science portal. It was created with a goal
            in mind to provide well written, well thought and well explained solutions
            for selected questions. The core team of five super geeks constituting of
            technology lovers and computer science enthusiasts have been constantly 
            working in this direction. GeeksforGeeks is a computer science portal. 
            It was created with a goal in mind to provide well written, well thought 
            and well explained solutions for selected questions. The core team of five
            super geeks constituting of technology lovers and computer science 
            enthusiasts have been constantly working in this direction.
          </p>
        </div>
        <hr>
      </div>
    </div>
  </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por mohitgouti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *