scrollspy不像docs Bootstrap 那样工作

bvpmtnay  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(1)|浏览(167)

我试着做一个像 Bootstrap 文档中的scrollspy。但是我不知道为什么它不适合我，我想当我向下看页面时，根据我向下看的位置，scrollspy会在导航栏中放置颜色，例如，如果我在联系人选项卡中，那么在导航栏中会有联系人的悬停，或者如果我点击联系人，它会在联系人中向下。我该怎么做？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <script src="https://kit.fontawesome.com/1aca141b14.js" crossorigin="anonymous"></script>
    <title>Portfolio</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg fixed-top navbar-custom" style="padding: 1%;">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                <ul class="navbar-nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading1">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading2">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading3">Compétences</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading4">Portfolio</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading6">À Propos</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading7">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%"
        data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">

        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg"
                        class="d-block w-100" style="filter: brightness(10%);" alt="...">
                    <div
                        class="carousel-caption d-none d-md-block d-flex h-50 align-items-center justify-content-center">
                        <h1>Portfolio</h1>
                        <h1 style="font-size: 90px;">Développeur Web Indépendant</h1>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg" class="d-block w-100"
                        style="filter: brightness(10%);" alt="...">
                    <div
                        class="carousel-caption d-none d-md-block d-flex h-50 align-items-center justify-content-center">
                        <h1>Création de sites web</h1>
                        <h1>Site vitrine, e-commerce, forum et autres</h1>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="images/10705380.jpg" class="d-block w-100" style="filter: brightness(10%);" alt="...">
                    <div
                        class="carousel-caption d-none d-md-block d-flex h-50 align-items-center justify-content-center">
                        <h1>Web design, conception graphiques</h1>
                        <h1>Logos, plaquettes publicitaire, cartes de visites,
                            newsletters</h1>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>

        <section class="caseservices" style="padding: 4%;">
            <div class="container text-center" href="scrollspyHeading1">
                <h1>MES SERVICES</h1>
                <h3 style="color: rgb(117, 111, 111);">Des prestations adaptées à vos besoins</h3>
            </div>
            <div class="container text-center" href="scrollspyHeading2">
                <div class="row">
                    <div class="col">
                        <div class="row align-items-center">
                            <div class="col-10">
                                <h5 class="text-end">Gestion de projets web</h5>
                                <p class="text-end">Site vitrine, corporate, évènementiel, e-commerce, intranet,
                                    application
                                    mobile.
                                </p>
                            </div>
                            <div class="col-2">
                                <i class="fa-solid fa-laptop-code fa-2xl"></i>
                            </div>

                            <div class="col-10">
                                <h5 class="text-end">Intégration Web</h5>
                                <p class="text-end">Des intégrations (X)HTML / CSS respectueuses des standards du Web.
                                </p>
                            </div>
                            <div class="col-2">
                                <i class="fa-solid fa-code fa-2xl"></i>
                            </div>

                            <div class="col-10">
                                <h5 class="text-end">Développements spécifiques</h5>
                                <p class="text-end">Des outils adaptés à votre coeur de métier,
                                    applications & solutions personnalisées.</p>
                            </div>
                            <div class="col-2">
                                <i class="fa-solid fa-wrench fa-2xl"></i>
                            </div>

                            <div class="col-10">
                                <h5 class="text-end">Référencement naturel</h5>
                                <p class="text-end">Affichage sémantique des informations,
                                    des pages propres pour un référencement optimal.</p>
                            </div>
                            <div class="col-2">

                                <i class="img-fluid material-icons"><img class="img-fluid w-100"
                                        src="images/5902216.png" alt="" style="width: 100%;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <img src="images/index.jpeg" class="d-block w-100" alt="...">
                    </div>
                    <div class="col">
                        <div class="row align-items-center">
                            <div class="col-2">

                                <i class="img-fluid material-icons"><img
                                        src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png"
                                        alt="" style="width: 100%;"></i>
                            </div>
                            <div class="col-10">
                                <h5 class="text-start">Conception graphique & Webdesign</h5>
                                <p class="text-start">Logos, templates Web, plaquettes publicitaires,
                                    cartes de visite, newsletters...</p>
                            </div>

                            <div class="col-2">

                                <i class="img-fluid material-icons"><img src="images/3938579.png" alt=""
                                        style="width: 100%;"></i>

                            </div>
                            <div class="col-10">
                                <h5 class="text-start">Dynamisme des pages</h5>
                                <p class="text-start">Des animations de contenu non intrusives
                                    pour embellir votre projet.</p>
                            </div>

                            <div class="col-2">

                                <i class="img-fluid material-icons"><img src="images/2739572-200.png" alt=""
                                        style="width: 100%;"></i>
                            </div>
                            <div class="col-10">
                                <h5 class="text-start">Interface d'administration</h5>
                                <p class="text-start">Outils spécifiques au bon fonctionnement
                                    de votre entreprise.</p>
                            </div>

                            <div class="col-2">

                                <i class="img-fluid material-icons"><img src="images/1027666.png" alt=""
                                        style="width: 100%;"></i>
                            </div>
                            <div class="col-10">
                                <h5 class="text-start">Responsive design</h5>
                                <p class="text-start">Compatible tous supports, tablette & application mobile.</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="parallax-header" style="   background: #000;
        background: linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.8)
        ),
        url(1393785.jpg);
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;">
            <div class="container d-flex align-items-center justify-content-center" style="height: 200px;">
                <div class="header-content">
                    <h4 class="text-center" style="color: white;">Compatible Mobile, Tablettes & P.C</h4>
                    <h1 class="text-center" style="color: white;">Développement Web Responsive</h1>
                </div>
            </div>
        </div>
        <div class="container text-center" style="padding: 4%;" href="scrollspyHeading3">
            <h1>MES COMPÉTENCES</h1>
            <h3 style="color: rgb(117, 111, 111);">Des compétences à votre service</h3>
            <div class="container text-center">
                <div class="row">
                    <div class="col text-start">
                        <h4>Domaines de compétences</h4>
                        <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i> Gestion de projets web
                        </h6>
                        <p style="font-style: italic;">Site vitrine, corporate, évènementiel, e-commerce, intranet,
                            application
                            mobile.</p>

                        <h6> <i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Conception graphique &
                            Webdesign </h6>
                        <p style="font-style: italic;">Logos, templates Web, plaquettes publicitaires, cartes de visite,
                            newsletters...</p>

                        <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Applications spécifiques
                            et
                            Interface d'administration</h6>
                        <p style="font-style: italic;">PHP - MySQL - AJAX / ASP.NET - C# - SQL</p>

                        <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Mise en place /
                            Modification
                            / Gestion de CMS</h6>
                        <p style="font-style: italic;">Wordpress, Joomla, Prestashop, phpBB, IPBoard</p>

                        <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Intégration (X)HTML / CSS
                        </h6>
                        <p style="font-style: italic;">Codage à la main respectueux des standards du Web</p>

                        <h6> <i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Dynamise des pages par
                            JavaScript / AJAX </h6>
                        <p style="font-style: italic;">jQuery, Prototype, Mootools, Scriptaculous</p>

                        <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i>Validation W3C, WAI &
                            référencement naturel SEO</h6>
                        <p style="font-style: italic;"> Accessibilité & ergonomie des pages web </p>

                        <h6><i class="fa-solid fa-circle-check" style="padding-right: 1%;"></i> Conception
                            multi-plateformes
                        </h6>
                        <p style="font-style: italic;">Compatible tous supports, tablette & application mobile</p>
                    </div>

                    <div class="col">
                        <h1>Compétences en développement</h1>
                        <div class="skills-bar">
                            <div class="bar">
                                <div class="info">
                                    <span>HTML/CSS</span>
                                </div>
                                <div class="progress-line html"><span></span></div>
                            </div>

                            <div class="bar">
                                <div class="info">
                                    <span>JAVASCRIPT/JQUERY</span>
                                </div>
                                <div class="progress-line javascript"><span></span></div>
                            </div>

                            <div class="bar">
                                <div class="info">
                                    <span>PHP</span>
                                </div>
                                <div class="progress-line php"><span></span></div>
                            </div>

                            <div class="bar">
                                <div class="info">
                                    <span>laravel</span>
                                </div>
                                <div class="progress-line python"><span></span></div>
                            </div>

                            <div class="bar">
                                <div class="info">
                                    <span>MYSQL</span>
                                </div>
                                <div class="progress-line mysql"><span></span></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container text-center" style="padding: 4%;" href="scrollspyHeading4">
            <h1>MES PROJETS</h1>
            <h4 style="color: rgb(117, 111, 111);">Une partie des projets sur lesquels j'ai travaillé</h4>

        </div>

        <div class="parallax-header" style="   background: #000;
        background: linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.8)
        ),
        url(521120.jpg);
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;">
            <div class="container d-flex align-items-center justify-content-center" style="height: 200px;">
                <div class="header-content">

                    <h1 class="text-center" style="color: white;"> PME, associations ou particuliers,
                        je réponds à vos besoins en développement web </h1>
                </div>
            </div>
        </div>
        </br>
        <h1 class="text-center" style="background-color: grey;">Une idée ? Un projet ? N'hésitez pas à demander un devis
            !
            [GRATUIT]</h1>

        <div class="container text-center" style="padding: 4%;" href="scrollspyHeading6">
            <h1>À PROPOS</h1>
            <h4 style="color: rgb(117, 111, 111);">Je suis développeur web freelance et j'aime ça !</h4>
            <div class="row">
                <div class="col">
                    <h4 class="text-start">Un développeur web passionné !</h4>
                    <p class="text-start">Ma passion pour le développement web commence en 2003 et m'a demandé un
                        changement
                        radical de cursus
                        afin de pouvoir pleinement l'exploiter.</br> </br>

                        Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les
                        divers projets développés.</br> </br>

                        En Mai 2009, je décide de devenir développeur web indépendant après plusieurs postes en tant que
                        développeur web « full-stack » réussis, qui me conforteront dans cette idée afin de toucher un
                        plus
                        large panel de domaines d'activités, voir du pays et conquérir le monde !</p>
                </div>

                <div class="col">
                    <img src="images/index.jpeg" class="d-block w-100" alt="...">
                </div>

                <div class="col">

                    <h4 class="text-start">Expérience en développement</h4>

                    <p class="text-start"> Mon expérience acquise au fil des projets me permet de mieux comprendre les
                        attentes d'un client
                        et de
                        répondre précisement au besoin demandé en fonction du domaine d'activité.</p>

                    <p class="text-start">Du site vitrine au projet plus complexe, je vous propose une expertise et un
                        développement web qui
                        correspond à vos attentes & à vos besoins.</p>

                    <h3 class="text-start">Un tarif adapté à votre projet</h3>

                    <p class="text-start"> Travaillant régulièrement avec des PME, associations ou particuliers, je vous
                        propose des solutions
                        à
                        votre portée & adaptée à votre budget.</p>

                </div>
            </div>
        </div>

        <div class="parallax-header" style="   background: #000;
            background: linear-gradient(
              rgba(0, 0, 0, 0.3),
              rgba(0, 0, 0, 0.8)
            ),
            url(1393769.jpg);
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;">
            <div class="container d-flex align-items-center justify-content-center" style="height: 200px;">
                <div class="header-content">
                    <h1 class="text-center" style="color: white;"> Un interlocuteur unique pour un site internet réussi
                        !
                    </h1>
                </div>
            </div>
        </div>
        <div class="container text-center" href="scrollspyHeading7">
            <h1 style="padding: 4%;"><b>CONTACTEZ-MOI</b></h1>
            <h3 style="background-color: rgb(245, 245, 245);padding: 1%;"><b>Une idée ? Un projet ? N'hésitez pas à
                    demander un devis !
                    [GRATUIT]</b></h3>

            <div class="row align-items-center" style="padding: 3%;">
                <div class="col text-start">
                    <div class="row">
                        <div class="col">
                            <div class="row">

                                <div class="col-2 align-self-center">
                                    <i class="bi bi-geo-alt-fill w-100"></i>
                                </div>
                                <div class="col-10"
                                    style="padding-top: 3%; padding-bottom: 3px;  border-bottom: 1px solid rgb(235, 232, 232);">
                                    <h6><b>ADRESSE</b></h6>
                                    <p>45, allée des Grives 83390 Cuers</p>
                                </div>

                                <div class="col-2 align-self-center">
                                    <i class="bi bi-whatsapp"></i>
                                </div>
                                <div class="col-10"
                                    style="padding-top: 3%; padding-bottom: 3px;  border-bottom: 1px solid rgb(235, 232, 232);">
                                    <h6><b>Téléphone</b></h6>
                                    <p>(+33) 6.15.42.10.45</p>
                                </div>

                                <div class="col-2 align-self-center">
                                    <i class="bi bi-envelope-fill"></i>
                                </div>
                                <div class="col-10"
                                    style="padding-top: 3%; border-bottom: 1px solid rgb(235, 232, 232);">
                                    <h6><b>E-mail</b></h6>
                                    <p>contact@mcrevoulin.com</p>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84484.16954505828!2d7.69203969606045!3d48.56905316140801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c8495e18b2c1%3A0x971a483118e7241f!2sStra%C3%9Fburg%2C%20Frankreich!5e0!3m2!1sde!2sde!4v1658941325979!5m2!1sde!2sde"
                        width="300" height="400" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                    <!-- <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d316530.06898113067!2d38.75890546037433!3d51.69843674434513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x413b2f5ce874e813%3A0x48d94c0efba762bd!2sWoronesch%2C%20Oblast%20Woronesch%2C%20Russland!5e0!3m2!1sde!2sde!4v1658941426253!5m2!1sde!2sde"
                    width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe> -->
                </div>
                <div class="col">
                    <form id="contactForm">

                        <!-- Name input -->

                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span>
                            <input type="text" class="form-control" placeholder="Nom Prénom" aria-label="Nom Prénom"
                                aria-describedby="basic-addon2">
                        </div>

                        <!-- Email address input -->
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">@</span>
                            <input type="text" class="form-control" placeholder="Email" aria-label="mail"
                                aria-describedby="basic-addon1">
                        </div>  
                     
                </div>
            </div>

        </div>
    </div>

    <script src="js/javascript.js"></script>
    <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>

</body>

</html>

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");
* {
  font-family: "Times New Roman";
}

/* Modify the background color */

.navbar-custom {
  background-color: rgba(255, 255, 255, 0.37);
}

.navbar-nav .nav-item {
  padding-left: 3%;
}

.nav-link .navbar-nav .nav-item {
  font-size: 39px;
}

.navbar-nav .nav-item .nav-link {
  color: white;
}

.navbar-nav .nav-item .nav-link:hover {
  color: cyan;
  box-shadow: inset 0 -2.5px 0 0 cyan;
}

.nav-item a:hover {
  color: cyan;
  box-shadow: inset 0 -2.5px 0 0 cyan;
}

/**/

.caseservices {
  background-image: url('114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg');
  background-repeat: no-repeat;
  background-size: 80%;
}

.carousel-inner .carousel-item>img {
  -webkit-animation: thing 20s;
  -o-animation: thing 20s;
  animation: thing 20s;
}

@keyframes thing {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}
twitter-bootstrap

1条答案

按热度按时间
2guxujil

2guxujil1#

让我们试试这个
在联系人部分将href更改为id（其他链接也是如此）
<div class="container text-center" href="scrollspyHeading7">
至
<div class="container text-center" id="scrollspyHeading7">

赞(0）分享  回复(0）举报  2022-12-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com