stackoom
  简体   繁体   中英

Bootstrap 5.2: Scrollspy not updating nav

 原文  2022-08-08 10:22:06  4   1    javascript/ html/ jquery/ css

Question

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/bootstrap@5.2.0/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 class="nav nav-pills nav-justified d-flex justify-content-center py-3 px-3 fixed-top mainnavbar" id="navbar">
    <li class="nav-item"><a href="#welcome" class="nav-link active" aria-current="page">Welcome</a></li>
    <li class="nav-item"><a href="#features" class="nav-link">Features</a></li>
    <li class="nav-item"><a href="#pricing" class="nav-link">Pricing</a></li>
    <li class="nav-item"><a href="#faqs" class="nav-link">FAQs</a></li>
    <li class="nav-item"><a href="#servers" class="nav-link">Servers</a></li>
    <li class="nav-item"><a href="#about" class="nav-link">About</a></li>
</nav>
<div class="cover d-flex aligns-items-center">
<div class="center-if-small" id="welcome">
    <h1 class="header align-middle">Hello!</h1>
    <p class="footer align-middle">Welcome to my new website!</p>
</div>
</div>
<div class="container" id="sspy" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-smooth-scroll="true">
    <hr>
    <h2 class="text-center" 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 class="text-center" 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 class="text-center" 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 class="text-center" 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 class="text-center" 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!

1 answers

solution1
 1 ACCPTED  2022-08-08 10:33:47

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/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Nested, collapsing sidebar nav with Bootstrap, Scrollspy, and Collapse? Bootstrap 4 nav bar first nav item not highlighted and scrollspy issue Twitter bootstrap scrollspy not working with nav-pills and smooth scrolling Bootstrap scrollspy not working and nav menu buttons are causing the header to reload Bootstrap Scrollspy not working: Scrollspy is not a function scrollspy not highlighting nav links at all Bootstrap scrollspy on scrollable div Bootstrap: ScrollSpy and smooth scroll jquery scrollintoview with bootstrap scrollspy Scrollspy not working in Bootstrap 4
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM