Vertical scrollspy with Bootstrap library

Ethan Karla 625 28 Jul 2021

How to make a vertical scrollspy with Bootstrap library?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 04 Aug 2021

Let's have an example to demonstrate toaster with the help of Bootstrap :

<!DOCTYPE html>

<html>

<head>

    <title>Bootstrap Example</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: 500px;

            color: #fff;

            background-color: #1E88E5;

        }

        #section2 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #673ab7;

        }

        #section3 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #ff9800;

        }

        #section41 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #00bcd4;

        }

        #section42 {

            padding-top: 50px;

            height: 500px;

            color: #fff;

            background-color: #009688;

        }

    </style>

</head>

<body data-spy='scroll' data-target='.navbar' data-offset='50'>

    <nav class='navbar navbar-inverse 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='#'>WebSiteName</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 class='dropdown'><a class='dropdown-toggle' data-toggle='dropdown' href='#'>Section 4 <span class='caret'></span></a>

                            <ul class='dropdown-menu'>

                                <li><a href='#section41'>Section 4-1</a></li>

                                <li><a href='#section42'>Section 4-2</a></li>

                            </ul>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </nav>

    <div id='section1' class='container-fluid'>

        <h1>Section 1</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section2' class='container-fluid'>

        <h1>Section 2</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section3' class='container-fluid'>

        <h1>Section 3</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section41' class='container-fluid'>

        <h1>Section 4 Submenu 1</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

    <div id='section42' class='container-fluid'>

        <h1>Section 4 Submenu 2</h1>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

    </div>

</body>

</html>

Hope this will help you.

Happy Coding!

forum

Vertical scrollspy with Bootstrap library

Can you answer this question?

1 Answers