问题描述
- 我正在尝试使用 Bootstrap 5 中的滚动间谍制作简历页面，但滚动间谍并没有改变它应有的方式。它只是继续突出显示列表组的最底部项目，如果有人能让我知道我哪里出错了，那就太好了。它只突出显示成绩单。我已多次阅读文档，但仍然无法弄清楚我哪里出错了。
- 问题是滚动间谍 .active 不会根据它所在的元素而改变。
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- required Meta tags -->
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="/css/style.css" type="text/css">
<title>Resume</title>
</head>
<body>
<!-- Top Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Ulysses Hill</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" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/Resume">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/gallery">gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Porfolio">Porfolio</a>
</li>
</ul>
</div>
</div>
</nav>
<!---->
<div class="container text-center">
<h1>Resume</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="list-group" id="list-example">
<a class="list-group-item list-group-item-action" href="#education">Education</a>
<a class="list-group-item list-group-item-action" href="#experience">Experience</a>
<a class="list-group-item list-group-item-action" href="#awards">Awards</a>
<a class="list-group-item list-group-item-action" href="#skills">Skills</a>
<a class="list-group-item list-group-item-action" href="#transcript">Transcript</a>
</div>
</div>
<div class="col-sm-9">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<div id="education">
<h2>Education</h2>
Cathedral High School (2019-Current) <br> Unweighted GPA: 4.00
<br>Weighted GPA: 4.50
<br> PSAT: 1210 (93rd percentile) <br> 10th Grade <br>Relevant Coursework: AP Chemistry,Honors Biology,Honors Algebra II,and Honors English I
</div>
<hr>
<div id="experience">
<h2><u>Experience</u></h2>
<h3 class="resumeh3">Varsity Water Polo</h3> Fall Sports Season 2019 <br>For my freshman year,I was the Goalie for Varsity Water Polo at Cathedral High School. My experience on the team helped me to learn time management,teamwork,leadership,and
drive.
<br>
<h3 class="resumeh3"> Founder and President of the Cathedral BSU</h3> 9/1/19- Current <br> In my freshman year at Cathedral High School,I founded a Black Student Union. With the goal of creating an organization that would help African American students
at Cathedral Highschool succeed both at school and in the outside world.
<h3 class="resumeh3">CHS Student Life ASB Freshman Lasallian Youth Ambassador</h3>
2019-2020 <br> I was the freshman Lasallian youth student life ambassador for the Associated Student Body.
<h3 class="resumeh3">Member of the Math Club</h3> 2019- Present<br> The Cathedral Math Club is an organization that works to foster the love of math in Cathedral High School Students.
<h3 class="resumeh3">Member of NHS</h3> Spring 2020 Semester-Present<br> The National Honor Society (NHS) is an organization that promotes recognition for students who reflect outstanding accomplishments in the areas of character,scholarship,and service. Members must have a cumulative 3.29 GPA with no D or F grades. Members must also complete 20 hours of community service per semester.
<h3 class="resumeh3">Member of Lasallian Youth</h3> 2019-Present <br>The Cathedral High School Lasallian Youth Club is a social justice organization that works to improve Cathedral as well as the surrounding community.
<h3 class="resumeh3"> Member of CFS </h3> Spring 2020 Semester-Present<br>The Californa Scholarship is an organization that promotes academic excellence. Members must meet rigorous academic requirements including a 3.5 GPA.
<h3 class="resumeh3">Catholic Schools Academic Junior High Decathlon Team Captain</h3> 2018-2019
<br> In my eighth grade year,I was captain of my school’s Academic Decathlon team. At the competition,I placed seventh out of one hundred students in the individual science competition. This experience thought me leadership,and the importance of a strong work ethic.
<hr>
</div>
<div id="awards">
<h2>Awards</h2>
<h3 class="resumeh3">A Honor Roll (5x)</h3> 1/24/20
<br> Given to me for achieving a minimum of a 3.5 or above GPA in the first semester of the 2019-2020 school year.
<h3 class="resumeh3">Principals Award(5x)</h3> 1/24/20<br> Given to me for achieving a GPA of 4.0 or above in the first semester of the 2019-2020 school year.
<h3 class="resumeh3">Excellence Award(2x)</h3> 1/24/20 <br>Given to me for achieving the highest GPA in my year for a semester.
<h3 class="resumeh3"> Admissions to the Math and Science Academy at Cathedral High School</h3> 1/24/20 <br>Given to me for achieving a score within the 90th percentile for the HSPT. The Math and Science Academy is designed to give students the opportunities,direction and challenge to best use their talents in the areas of Math and Sciences through a rigorous schedule of Honors and AP coursework.
<h3 class="resumeh3">8th Grade Diploma</h3> 5/30/19 <br>I graduated from Assumption of the Blessed Virgin Mary School in 2019.
<h3 class="resumeh3">CJSF Medal</h3> 5-30-19<br> Received upon 8th-grade graduation for outstanding academic achievement.
<h3 class="resumeh3">Presidents Silver Award</h3> 5-30-19 <br>Received upon 8th-grade graduation for academic excellence throughout junior high school.
<h3 class="resumeh3">First Honors (6x)</h3> 2017-2019 <br>Given to me for all three trimesters of both Seventh and Eighth Grade for achieving a GPA of 3.7 or higher.
</div>
<hr>
<div id="skills">
<h2>Skills</h2>
<ul>
<li>leadership</li>
<li>Organization</li>
<li>Critical Thinking</li>
<li>Frontend Wed Development</li>
</ul>
</div>
<hr>
<div id="transcript">
<h2>Transcript</h2>
<iframe src="/images/Ulysses Hill Transcript (1).pdf" width="100%" height="500px">
</iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方法
只需使用 sticky-top 中的 bootstrap-5 类并在 CSS 中添加 top 属性
.list-group{
top: 50px;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<body>
<!-- Top Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/">Ulysses Hill</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" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/Resume">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Porfolio">Porfolio</a>
</li>
</ul>
</div>
</div>
</nav>
<!---->
<div class="container text-center">
<h1>Resume</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="list-group sticky-top" id="list-example">
<a class="list-group-item list-group-item-action" href="#education">Education</a>
<a class="list-group-item list-group-item-action" href="#experience">Experience</a>
<a class="list-group-item list-group-item-action" href="#awards">Awards</a>
<a class="list-group-item list-group-item-action" href="#skills">Skills</a>
<a class="list-group-item list-group-item-action" href="#transcript">Transcript</a>
</div>
</div>
<div class="col-sm-9">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<div id="education">
<h2>Education</h2>
Cathedral High School (2019-Current) <br> Unweighted GPA: 4.00
<br>Weighted GPA: 4.50
<br> PSAT: 1210 (93rd percentile) <br> 10th Grade <br>Relevant Coursework: AP Chemistry,Honors Biology,Honors Algebra II,and Honors English I
</div>
<hr>
<div id="experience">
<h2><u>Experience</u></h2>
<h3 class="resumeh3">Varsity Water Polo</h3> Fall Sports Season 2019 <br>For my freshman year,I was the Goalie for Varsity Water Polo at Cathedral High School. My experience on the team helped me to learn time management,teamwork,leadership,and
drive.
<br>
<h3 class="resumeh3"> Founder and President of the Cathedral BSU</h3> 9/1/19- Current <br> In my freshman year at Cathedral High School,I founded a Black Student Union. With the goal of creating an organization that would help African American students
at Cathedral Highschool succeed both at school and in the outside world.
<h3 class="resumeh3">CHS Student Life ASB Freshman Lasallian Youth Ambassador</h3>
2019-2020 <br> I was the freshman Lasallian youth student life ambassador for the Associated Student Body.
<h3 class="resumeh3">Member of the Math Club</h3> 2019- Present<br> The Cathedral Math Club is an organization that works to foster the love of math in Cathedral High School Students.
<h3 class="resumeh3">Member of NHS</h3> Spring 2020 Semester-Present<br> The National Honor Society (NHS) is an organization that promotes recognition for students who reflect outstanding accomplishments in the areas of character,scholarship,and service. Members must have a cumulative 3.29 GPA with no D or F grades. Members must also complete 20 hours of community service per semester.
<h3 class="resumeh3">Member of Lasallian Youth</h3> 2019-Present <br>The Cathedral High School Lasallian Youth Club is a social justice organization that works to improve Cathedral as well as the surrounding community.
<h3 class="resumeh3"> Member of CFS </h3> Spring 2020 Semester-Present<br>The Californa Scholarship is an organization that promotes academic excellence. Members must meet rigorous academic requirements including a 3.5 GPA.
<h3 class="resumeh3">Catholic Schools Academic Junior High Decathlon Team Captain</h3> 2018-2019
<br> In my eighth grade year,I was captain of my school’s Academic Decathlon team. At the competition,I placed seventh out of one hundred students in the individual science competition. This experience thought me leadership,and the importance of a strong work ethic.
<hr>
</div>
<div id="awards">
<h2>Awards</h2>
<h3 class="resumeh3">A Honor Roll (5x)</h3> 1/24/20
<br> Given to me for achieving a minimum of a 3.5 or above GPA in the first semester of the 2019-2020 school year.
<h3 class="resumeh3">Principals Award(5x)</h3> 1/24/20<br> Given to me for achieving a GPA of 4.0 or above in the first semester of the 2019-2020 school year.
<h3 class="resumeh3">Excellence Award(2x)</h3> 1/24/20 <br>Given to me for achieving the highest GPA in my year for a semester.
<h3 class="resumeh3"> Admissions to the Math and Science Academy at Cathedral High School</h3> 1/24/20 <br>Given to me for achieving a score within the 90th percentile for the HSPT. The Math and Science Academy is designed to give students the opportunities,direction and challenge to best use their talents in the areas of Math and Sciences through a rigorous schedule of Honors and AP coursework.
<h3 class="resumeh3">8th Grade Diploma</h3> 5/30/19 <br>I graduated from Assumption of the Blessed Virgin Mary School in 2019.
<h3 class="resumeh3">CJSF Medal</h3> 5-30-19<br> Received upon 8th-grade graduation for outstanding academic achievement.
<h3 class="resumeh3">Presidents Silver Award</h3> 5-30-19 <br>Received upon 8th-grade graduation for academic excellence throughout junior high school.
<h3 class="resumeh3">First Honors (6x)</h3> 2017-2019 <br>Given to me for all three trimesters of both Seventh and Eighth Grade for achieving a GPA of 3.7 or higher.
</div>
<hr>
<div id="skills">
<h2>Skills</h2>
<ul>
<li>Leadership</li>
<li>Organization</li>
<li>Critical Thinking</li>
<li>Frontend Wed Development</li>
</ul>
</div>
<hr>
<div id="transcript">
<h2>Transcript</h2>
<iframe src="/images/Ulysses Hill Transcript (1).pdf" width="100%" height="500px">
</iframe>
</div>
</div>
</div>
</div>
</div>
</body>