How To Set The Offset Property for Scrollspy In Bootstrap

Posted By Bajarangi soft , Posted On 13-10-2020

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.

<!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: #cdca32;
        }

        #section2 {
            padding-top: 50px;
            height: 600px;
            background-color: #73d2c4;
        }

        #section3 {
            padding-top: 50px;
            height: 600px;
            background-color: #c46b6b;
        }

        #section4 {
            padding-top: 50px;
            height: 600px;
            background-color: #d54b4b;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-dark bg-danger
      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="#">BAJARANGI SOFT
            </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 bajarangi soft
        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>
        bajarangi soft is a web designing
        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>
       bajarangi soft is a web designing
        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>
        bajarangi soft is aweb designing
        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>

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.

<!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>
                    Bajarangi Soft is a wed designing 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. Bajarangi Soft is a web designing
                    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.
                    Bajaarangi Soft 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. Bajarangi Soift 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 bajarangi Constituting of technology lovers and web designing
                    enthusiasts have been constantly working in this direction.
                </p>
            </div>
            <hr>
            <div id="section2">
                <h2>Section Two</h2>
                <p>
                  Bajarangi Soft is a wed designing 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. Bajarangi Soft is a web designing
                    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.
                    Bajaarangi Soft 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. Bajarangi Soift 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 bajarangi Constituting of technology lovers and web designing
                    enthusiasts have been constantly working in this direction.
                </p>
            </div>
            <hr>
            <div id="section3">
                <h2>Section Three</h2>
                <p>
                   Bajarangi Soft is a web designing 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>

Related Post

Relationship Method VS Dynamic Property in Laravel with example
How To Use HTML DOM Attributes Property With JavaScript
What Is The Use Of Display Property In Css
What IS The Flex Property In CSS
What Is Scrollspy With Examples In Bootstrap
Display Property In Bootstrap With Examples
How To Apply Multiple Transform property Using Css
How To Set The Offset Property for Scrollspy In Bootstrap
Manipulate Multiple Property With Animate Method In JQuery