如何在 Bootstrap 中为 ScrollSpy 设置偏移属性？

Offset是 Bootstrap Scrollspy 的一个属性，用户可以在其中指定在计算滚动位置时从顶部偏移的像素。当用户觉得导航栏或列表提前或在浏览时不需要时更改状态时，它会变得有用。它始终是一个数字，默认值为 10。该值可以通过 JavaScript 更改或将 data-offset 值放在 body 标记中。

句法：

• 正常声明

  (body data-offset="")

• JavaScript 声明

  $(document).ready(function(){
    $('body').scrollspy({target: " ", offset: });
  });
  

示例 1：此示例描述了引导程序导航栏，其中使用了四个部分，并且使用 JavaScript 将偏移属性设置为 60。

  

  Bootstrap offset property
  
  
  
  
  
  
  
    
  
    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;
    }
  

  

  
    
      
        
          
          
          
        
        
          GeeksforGeeks
        
      
      
        
          
            Section 1
            Section 2
            Section 3
            Section 4
          
        
      
    
  
  
  
    Section 1
    
    
      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.
    
  
  
    Section 2
    
    
      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.
    
  
  
    Section 3
    
    
      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.
    
  
  
    Section 4
    
    
      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.
    
  
  
  
    $(document).ready(function () {
      $('body').scrollspy({
        target: ".navbar", offset: 50
      });
    });
  

  

输出：

示例 2：该示例描述了 bootstrap list-group，其中使用了三个部分，并且 body 标签中的 offset 属性设置为 15。

  

  
  
  
  Bootstrap 4 ScrollSpy
  
  
  
  
  
  
  
  
  
    
  
    body {
      position: relative;
      /* required */
    }
  
    .list-group {
      position: sticky;
      top: 20px;
    }
  

  

    
  
    Bootstrap Scrollspy
    
    
      
        
          Section One
          
          Section Two
          
          Section Three
          
        
      
      
        
          Section One
          
            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.
          
        
        
        
          Section Two
          
            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.
          
        
        
        
          Section Three
          
            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.
          
        
        
      
    
  

  

输出：