How to set the offset property for ScrollSpy in Bootstrap ?

Offset is a Bootstrap Scrollspy property wherein the user can specify the pixels to offset from top when calculating the position of scroll. It becomes useful when the user feels that either the navbar or the list changes the state early or when not needed while surfing. It is always a number and the default value is 10. The value can be changed through JavaScript or putting the data-offset value in the body tag.

Syntax:

  • Normal Declaration
    (body data-offset="")
  • JavaScript Declaration
    $(document).ready(function(){
      $('body').scrollspy({target: " ", offset: });
    });
    

Example 1: This example describes the bootstrap navbar where four sections have been used and the offset property is set at 60 using JavaScript.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  <script src=
  </script>
  <script src=
  </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>

chevron_right


Output:

Example 2: The example describes bootstrap list-group where three sections have been used and the offset property is set at 15 in the body tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
  <link rel="stylesheet" href=
  <script src=
  </script>
  <script src=
  </script>
  <script src=
  </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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.