Bootstrap 5.2: Scrollspy not updating nav-CodePudding

little stumped here when trying to make my new website. I decided I wanted to add a scrollspy using Bootstrap so it looks for lively. I tried it but nothing seems to be happening to the navigation bar when I scroll the webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@650&display=swap" rel="stylesheet"> 
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <style>
        * {
            font-family: 'Montserrat', sans-serif;
            color: white;
            position: relative;
        }
        body {
            background: #313131
        }
        .cover {
            background: url(bg.svg) no-repeat center center fixed;
            background-color: #313131;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            color: white;
            /* margin: 0; */
            /* position: absolute; */
            /* top: 50%;
            -ms-transform: translateY(-50%);
            transform: translateY(-50%); */
            padding-left: 2.5vw;
            height: 100%;
            width: 100%;
        }

        .mainnavbar {
            background: #313131b6
        }

        @media screen {
            .center-if-small {
                text-align: left;
            }
            .header {
                font-size: xx-large;
                max-width: 700px;
                margin-top: 40vh;
            }
            .footer {
                font-size: small;
                margin-bottom: 40vh;

            }
        }

        @media screen and (max-width: 768px) {
            .center-if-small {
                text-align: center;
                padding-left: 5vw;
                padding-right: 5vw;
            }
            .header {
                font-size: x-large;
            }
            .footer {
                font-size: x-small;
            }
        }

        @media screen and (max-width: 1160px) {
            .cover {
                background: #313131
            }
        }



    </style>    
</head>
<body>


<nav  id="navbar">
    <li ><a href="#welcome"  aria-current="page">Welcome</a></li>
    <li ><a href="#features" >Features</a></li>
    <li ><a href="#pricing" >Pricing</a></li>
    <li ><a href="#faqs" >FAQs</a></li>
    <li ><a href="#servers" >Servers</a></li>
    <li ><a href="#about" >About</a></li>
</nav>
<div >
<div  id="welcome">
    <h1 >Hello!</h1>
    <p >Welcome to my new website!</p>
</div>
</div>
<div  id="sspy" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true">
    <hr>
    <h2  id="features">Features</h2>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
    Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
    Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
    <hr>
    <h2  id="pricing">Pricing</h2>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
    Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
    Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
    <hr>
    <h2  id="faqs">FAQs</h2>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
    Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
    Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
    <hr>
    <h2  id="servers">Servers</h2>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
    Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
    Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
    <hr>
    <h2  id="about">About</h2>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. In excepturi assumenda velit est ullam id iusto veniam consequuntur, nihil repellat omnis magni praesentium ratione. Voluptatem inventore ea voluptates ut cum.
    Perferendis dicta veniam error ad obcaecati possimus veritatis facere cupiditate laudantium numquam temporibus fuga consequuntur, exercitationem eligendi sed eveniet qui corporis aperiam at incidunt? Commodi officia odit est unde modi.
    Laborum tempora vel minus iure accusantium aliquam aliquid quo nihil earum. Corrupti eaque quas, et impedit doloribus blanditiis inventore, sint natus odio corporis ipsa tenetur reiciendis mollitia molestiae similique officia?
</div>    

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    $(function(){
    //    $('#sspy').on('activate.bs.scrollspy')
       $('#sspy').scrollspy();
    });
</script>
</body>
</html>

I've tried several stuff to fix it, but nothing is happening. Really need help, thanks!

CodePudding user response：

You have missed to add the js file of bootstrap, Add the below file in your code beside jquery.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

For more please check : https://jsfiddle.net/ponsiva/j80t5c39/1/