I was trying to make my navbar sticky with jqueries the style of the className ".sticky" is in the css/styles.css folder i am unable to achieve the sticky nav function... I don't know what I am doing wrong in my main.jss file
//html file ------->
<body>
<!-- HEAD SECTION WITH BG-IMAGE AND NAVBAR -->
<header style="background-image: url('./images/back.jpg ');">
<!-- <div > -->
<!-- NAVIGATION BAR WITH NAVBRAND AND TICKET -->
<nav >
<a href="#"><img src="images/brand.png" alt="brand"></a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i ></i>
</button>
<div id="navbarNav">
<!-- <div ></div> -->
<ul >
<li >
<a href="#">Home</a>
</li>
<li >
<a href="#">Experience</a>
</li>
<li >
<a href="#">Gallery</a>
</li>
<li >
<a href="#">Contact</a>
</li>
</ul>
<!-- <div >
<button type="button" >
<i ></i>
<span>Tickets</span></button>
</div> -->
<div ><img src="images/ticket.png" alt="ticket"></div>
</div>
</nav>
<!-- </div> -->
<div >
<!-- BACKGROUND IMAGE WITH LOGO IMAGE AND CAPTION TEXT -->
<div >
<!-- CAPTION TEXT -->
<div >
<span >Experience</span>
<h1>The Ada Calypso</h1>
<span>'Dec 16<sup>th</sup>-17<sup>th</sup></span>
</div>
<!-- LOGO IMAGE -->
<div >
<img src="images/banner.png" alt="logo image">
</div>
</div>
</div>
</header>
<!-- MAIN PAGE WITH SECTIONS -->
<main>
<!-- EXPERIENCE SECTION WITH IMAGES AND CAPTION -->
<section >
<div >
<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 >
<div >
<img src="images/fireside.jpg" alt="fireside at treasure island">
</div>
<div >
<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 >
<div >
<img src="images/samba.jpg" alt="samba dancers">
</div>
<div >
<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 >
<div >
<img src="images/art.jpg" alt="arts">
</div>
<div >
<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 >
<div >
<img src="images/ada_port.jpg" alt="yatch on ada">
</div>
<div >
<img src="images/ada_beach.jpg" alt="ada beach">
</div>
</div>
</div>
</section>
<!-- THE MEDIA PARTNERSHIP SECTION -->
<section id="sponsor">
<div >
<h2>Media Partners</h2>
<img src="images/ghone.png" alt="Gh one Tv">
<img src="images/4syte.png" alt="4syte tv">
<img src="images/gbafrica.png" alt="Gb Africa">
<img src="images/kobby.png" alt="kobby kyei">
<img src="images/sheldon.png" alt="Kwadwo sheldon">
<img src="images/ronnie.png" alt="Ronnie is everywhere">
<img src="images/sammykay.jpg" alt="sammy kay">
<img src="images/starr.png" alt="Starr fm">
</div>
</section>
<!-- EMBED GOOGLE MAP -->
<section id="map">
<div >
<h3>Locate Us</h3>
<div >
<iframe width="100%" height="468"
src="https://maps.google.com/maps?q=Camp tsatse resort&t=&z=15&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section >
<div >
<!-- ABOUT CONTENT -->
<div >
<h2>About RiverFest</h2>
<p >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 >#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 >
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 >
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 >
<div >
<!-- FIRST COLUMN -->
<div >
<h2 >Presented By</h2>
<img src="images/riverfest.png" alt="RiverFest logo">
<p >
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 >
<h4 >Tickets Available On sale</h4>
<a href="#"><img src="images/ticket.png" alt="Ticket"></a>
</div>
<!-- THIRD COLUMN -->
<div >
<h4 >Follow Us</h4>
<p >Let's go social</p>
<div >
<i ></i>
<i ></i>
<i ></i>
<i ></i>
<i ></i>
</div>
</div>
</div>
</div>
</footer>
<!-- BOOTSTRAP JAVASCRIPT PLUGIN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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 FILE --------------->
{
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 FILE --------------------------->
let navigationbar = $(".navbar");
$(window).scroll(function () {
let topOfSect = $(".experience").offset().top - window.innerHeight;
if ($(window).scrollTop() > topOfSect) {
navigationbar.addClass("sticky")
}
else {
navigationbar.removeClass("sticky")
}
});
CodePudding user response：
Maybe you can try with position: sticky;