我试图用jqueries使我的导航栏粘滞，className的样式“.sticky”在css/styles.css文件夹中，我无法实现粘滞导航功能...我不知道我在主.jss文件中做错了什么
//html文件----
<body>
<!-- HEAD SECTION WITH BG-IMAGE AND NAVBAR -->
<header class="masthead head" style="background-image: url('./images/back.jpg ');">
<!-- <div class="container-fluid p-0"> -->
<!-- NAVIGATION BAR WITH NAVBRAND AND TICKET -->
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a class="navbar-brand" href="#"><img src="images/brand.png" alt="brand"></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">
<i class="fa-regular fa-align-right"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- <div class="mx-auto"></div> -->
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<!-- <div class="container">
<button type="button" class="btn btn-outline-dark btn-lg ticket">
<i class="fa-solid fa-ticket"></i>
<span>Tickets</span></button>
</div> -->
<div class="container ticket"><img src="images/ticket.png" alt="ticket"></div>
</div>
</nav>
<!-- </div> -->
<div class="container text-center">
<!-- BACKGROUND IMAGE WITH LOGO IMAGE AND CAPTION TEXT -->
<div class="row">
<!-- CAPTION TEXT -->
<div class="col-md-6 col-sm-12">
<span class="top">Experience</span>
<h1>The Ada Calypso</h1>
<span>'Dec 16<sup>th</sup>-17<sup>th</sup></span>
</div>
<!-- LOGO IMAGE -->
<div class="col-md-6 col-sm-12 h-25">
<img src="images/banner.png" alt="logo image">
</div>
</div>
</div>
</header>
<!-- MAIN PAGE WITH SECTIONS -->
<main>
<!-- EXPERIENCE SECTION WITH IMAGES AND CAPTION -->
<section class="experience">
<div class="container align-center">
<h2>The Experience</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="images/fireside.jpg" alt="fireside at treasure island">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/relax.jpg" alt="couples enjoying a drink">
</div>
</div>
<h2>The Culture</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bubble">
<div class="col-md-6 col-sm-12">
<img src="images/samba.jpg" alt="samba dancers">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/masqu.jpg" alt="masqueraders paroding the streets">
</div>
</div>
<h2>The Arts</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/art.jpg" alt="arts">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/creativity.jpg" alt="arts">
</div>
</div>
<h2>The River</h2>
<!-- <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt aperiam sit fuga, quasi numquam
eligendi ratione rem ipsam quaerat tempora alias cupiditate mollitia earum. Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Quos, aut!</p> -->
<div class="row bg">
<div class="col-md-6 col-sm-12">
<img src="images/ada_port.jpg" alt="yatch on ada">
</div>
<div class="col-md-6 col-sm-12">
<img src="images/ada_beach.jpg" alt="ada beach">
</div>
</div>
</div>
</section>
<!-- THE MEDIA PARTNERSHIP SECTION -->
<section id="sponsor">
<div class="container">
<h2>Media Partners</h2>
<img class="sponsor_logo" src="images/ghone.png" alt="Gh one Tv">
<img class="sponsor_logo" src="images/4syte.png" alt="4syte tv">
<img class="sponsor_logo" src="images/gbafrica.png" alt="Gb Africa">
<img class="sponsor_logo" src="images/kobby.png" alt="kobby kyei">
<img class="sponsor_logo" src="images/sheldon.png" alt="Kwadwo sheldon">
<img class="sponsor_logo" src="images/ronnie.png" alt="Ronnie is everywhere">
<img class="sponsor_logo" src="images/sammykay.jpg" alt="sammy kay">
<img class="sponsor_logo" src="images/starr.png" alt="Starr fm">
</div>
</section>
<!-- EMBED GOOGLE MAP -->
<section id="map">
<div class="container">
<h3>Locate Us</h3>
<div class="gmap_canvas">
<iframe width="100%" height="468"
src="https://maps.google.com/maps?q=Camp%20tsatse%20resort&t=&z=15&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section class="about">
<div class="container text-center">
<!-- ABOUT CONTENT -->
<div class="about-content text-right">
<h2>About RiverFest</h2>
<p class="pt-4">RiverFest22” is an annual festival curated to celebrate and propagate the
socioeconomic and cultural affairs of Ghana. It aims at creating a networking and
entertaining environment for all our revelers. Our target is the energetic individual
who wants to experience nature whiles having fun.This maiden edition will be organized
in Ada Foah at the Camp Tsatse Resort. The Resort is located on the amazing banks of the
Volta River.</p>
<p class="pt-4">#RiverFest22, which is also themed “The Ada Calypso”, is a 3-day fun-packed
event, which is scheduled to take place from Friday, 16 to Sunday, 18 December 2022. The
festival is designed to have an action-packed programme of activities with exciting
exhibitions of talents and products from vendors.</p>
<p class="pt-4">
The event promises patrons with an amazing experience of art and creativity from the
local creative and art industry and a taste of calypso in the Ghanaian environment.
There will be a street carnival with samba dancers and masquerades from the town to the
event venue. There will also be a special canoe boat race on the river to help promote
the need to protect the water bodies as well as create an ecological awareness of the
place.
</p>
<p class="pt-4">
The festival is set for both residential and non-residential participation. Residential
patrons arrive on Friday and leave on Sunday. All non-residential revelers will be
welcome on Saturday for the full day event.
</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER SECTION WITH CONTACTS AND COPYRIGHT -->
<footer>
<div class="container-fluid p-0">
<div class="row text-left">
<!-- FIRST COLUMN -->
<div class="col-md-5 col-md-5">
<h2 class="text-light">Presented By</h2>
<img class="footer_image" src="images/riverfest.png" alt="RiverFest logo">
<p class="pt-4 text-muted">
All rights reserved © Copyright 2022 Developed by <span><a
href="https://www.instagram.com/_k.wolfe/">WolfeTech Devs Inc.</a></span> | Powered by
<span><a href="https://www.instagram.com/lonoconcepts/">Lono Concepts</a></span>
</p>
</div>
<!-- SECOND COLUMN -->
<div class="col-md-5">
<h4 class="text-light">Tickets Available On sale</h4>
<a class="ticket-image" href="#"><img src="images/ticket.png" alt="Ticket"></a>
</div>
<!-- THIRD COLUMN -->
<div class="col-md-2">
<h4 class="text-light">Follow Us</h4>
<p class="text-muted">Let's go social</p>
<div class="column">
<i class="social-icon fab fa-facebook-f"></i>
<i class="social-icon fab fa-twitter"></i>
<i class="social-icon fab fa-instagram"></i>
<i class="social-icon fa-brands fa-tiktok"></i>
<i class="social-icon fa-brands fa-youtube"></i>
</div>
</div>
</div>
</div>
</footer>
<!-- BOOTSTRAP JAVASCRIPT PLUGIN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<!-- JQUERY PLUGIN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Personal JAVASCRIPT -->
<script src="js/main.js"></script>
</body>//CSS文件--------------〉
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
header,
section {
overflow-x: hidden;
}
:root {
--Slackey: 'Slackey', cursive;
--Rock-Salt: 'Rock Salt', cursive;
--light-black: #2e2c2caf;
--bggradient: linear-gradient(to bottom, #FEB101, #FE7435);
--light-gray: rgba(255, 255, 255, 0.877);
}
header {
opacity: rgba(0, 0, 0, 0.2);
}
/* NAVBAR STYLES */
header .navbar a {
font-family: var(--Slackey);
font-size: 0.9em;
color: black;
}
.masthead {
background-size: cover;
min-height: 100vh;
position: relative;
color: white;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
header .nav-item:last-child {
padding-right: 5.5em;
}
header .nav-item {
padding: 1.5em;
}
header .navbar-brand {
padding-left: 3rem;
}
header .navbar .navbar-brand img {
width: 40%;
}
.ticket img{
width: 30%;
}
.ticket i {
padding-right: 0.1rem;
}
header .nav-link:hover {
color: whitesmoke;
}
header .nav-link {
transition: all 0.3s ease-in-out;
}
.ticket span {
font-family: var(--Slackey);
}
header .row .col-md-5 {
padding: 4.2vmin 1vmin;
}
header .row .col-md-6 {
padding: 22vmin 1vmin;
padding-bottom: 35vmin;
font-family: var(--Rock-Salt);
}
header .row .col-md-5 img {
width: 90%;
}
header .container .col-md-6 span {
padding: 1vmin;
letter-spacing: 4px;
font-size: 3.5vmin;
}
header .container .col-md-6 h1 {
font-size: 8vmin;
font-weight: bold;
padding: 0.1em 0em;
}
/*/*//*/*//* MAINPAGE SECTIONS *//*/*//*/*/
/* EXPERIENCE SECTION */
.experience{
background: linear-gradient(to bottom
white, #FE7435
);
}
.experience .container {
padding: 3% 0%;
}
.experience .col-md-6 img {
opacity: 0.8;
width: 100%;
border-radius: 0.2em;
border: 1px solid #000000;
}
.experience .container h2 {
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 3.5em 0em .5em;
}
/* MEDIA PARTNERS */
#sponsor h2 {
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
.sponsor_logo {
width: 9%;
margin: 30px 20px 50px;
}
#sponsor .container {
padding: 7% 0%;
}
/* ABOUT SECTION */
.about{
padding: 8vmin 0;
}
.about .container .about-content{
background: white;
border-radius: 3px;
text-align: left;
padding: 13vmin 5vmin 20vmin 10vmin;
box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.about .container .about-content h2{
font-size: 3.5vmin;
font-weight: bold;
font-family: var(--Rock-Salt);
padding: 1.5em 0em 1.2em;
text-align: center;
}
.about.about-content p{
font-size: 0.9em;
color: rgba(0, 0, 0, 0.5);
}
/* MAP */
.gmap_canvas {
overflow: hidden;
background: none !important;
}
#map .container h3{
font-family: var(--Rock-Salt);
font-weight: bold;
text-align: left;
font-size: 2rem;
padding: 25px;
}
/* FOOTER */
footer{
background: rgba(0, 0, 0, 0.815);
overflow-x: hidden;
padding: 14vmin 18vmin;
}
footer h2, h4{
font-family: var(--Slackey);
padding: 20px;
font-weight: bold;
font-size: 1.5rem;
}
footer .column i{
color: #dd2476
}
footer .column i+i{
padding: 0 0.5em;
}
footer p>span a{
text-decoration: none;
}
footer p>span a{
color: #FE7435;
}
/* STICKY CLASS */
.sticky{
position: fixed;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.815);
z-index: 9999;
transition: all 1.5s ease;
}//MAIN.JS ------------
let navigationbar = $(".navbar");
$(window).scroll(function () {
let topOfSect = $(".experience").offset().top - window.innerHeight;
if ($(window).scrollTop() > topOfSect) {
navigationbar.addClass("sticky")
}
else {
navigationbar.removeClass("sticky")
}
});
1条答案
按热度按时间yrwegjxp1#
也许你可以试试
position: sticky;