scrollspy 不像在 docs bootstrap 中那样工作
[英]scrollspy doesn't work like in docs bootstrap
问题描述
I am trying to do a scrollspy like in the bootstrap documentation.
我正在尝试像 bootstrap 文档中那样做一个滚动间谍。 But I don't know why it doesn't work for me, I would like that when I go down the page depending on where I go down the scrollspy puts the color in the navbar, for example if I'm in the contact tab so that in the navbar there is the hover in contact or if I click on contact it goes down in contact.但我不知道为什么它对我不起作用，我希望当我 go 向下取决于我 go 向下滚动时将颜色放在导航栏中的位置，例如，如果我在联系人选项卡中这样在导航栏中就会有 hover 处于联系状态，或者如果我点击联系方式，它会在联系中下降。 How should I do?我应该怎么做？
<,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) } }
1 个解决方案
解决方案1
1 已采纳 2022-07-29 13:19:41
Lets try this让我们试试这个
change href to id in your contact section (same for other links )在您的联系部分中将 href 更改为 id（其他链接相同）
<div class="container text-center" href="scrollspyHeading7">
to至
<div class="container text-center" id="scrollspyHeading7">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery Bootstrap ScrollSpy不起作用 - jQuery Bootstrap ScrollSpy doesn't work
Bootstrap scrollspy在标签内不起作用？ - Bootstrap scrollspy doesn't work inside tabs?
Angular Bootstrap scrollspy不适用于动态图像内容 - Angular bootstrap scrollspy doesn't work with dynamic image content
具有列表组的Bootstrap 4 scrollspy不起作用 - Bootstrap 4 scrollspy with list-group doesn't work
引导scrollspy在IE中不起作用？ - Bootstrap scrollspy doesn't works in ie?
scrollspy 和更改颜色不起作用 bootstrap 5 - scrollspy and change color don't work bootstrap 5
Scrollspy jQuery在Firefox，Opera中不起作用 - Scrollspy jquery doesn't work in firefox, opera
scrollSpy 与 vanilla js，代码不起作用 - scrollSpy with vanilla js, the code doesn't work
我正在尝试在 Bootstrap 4 中使用列表组实现 Scrollspy，但它不起作用 - I am trying to implement Scrollspy with list group in Bootstrap 4, but it doesn't work
Bootstrap DataTable无法按照插件文档中的描述运行 - Bootstrap DataTable doesn't work as described in plugin docs
相关标签