Как установить свойство смещения для ScrollSpy в Bootstrap?

Опубликовано: 5 Января, 2022

Смещение - это свойство Bootstrap Scrollspy, в котором пользователь может указать пиксели для смещения сверху при вычислении позиции прокрутки. Это становится полезным, когда пользователь чувствует, что либо панель навигации, либо список меняют состояние раньше или когда они не нужны во время серфинга. Это всегда число, а значение по умолчанию - 10. Значение можно изменить с помощью JavaScript или путем помещения значения смещения данных в тег body.

Синтаксис:

Обычная декларация
```
 (body data-offset = "")
```

Декларация JavaScript

$ (документ) .ready (функция () {
  $ ('тело'). scrollspy ({цель: "", смещение:});
});

Пример 1. В этом примере описывается панель навигации начальной загрузки, в которой были использованы четыре раздела, а для свойства смещения установлено значение 60 с помощью 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" 4 a ></ li > "#section4" >Section 4</ ></ 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 > 

Выход:

Пример 2: Пример описывает группу списков начальной загрузки, в которой использовались три раздела, а для свойства смещения установлено значение 15 в теге body.

 <!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 > 

Выход:

Вопросы о Web технологиях Picked HTML CSS-Misc HTML-Misc CSS Bootstrap

Как установить свойство смещения для ScrollSpy в Bootstrap?

РЕКОМЕНДУЕМЫЕ СТАТЬИ