Menu
When I scroll the page more than the height of navbar, I want to change navbar background color.
To achieve this, I used below logic but problem is before scrolling the navbar background color is changed, and text color stays same as before.
What is my mistake here?
Sample code:
<!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 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
<link href="assets/custom.css" rel="stylesheet">
<title>Karvy InnoTech</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top scrolled">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#explore">Explore</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#adventure">Adventure</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="jumbotron jumbotron-fluid heigh100p banner" id="home">
<div class="container h100">
<div class="contentBox h100">
<div>
<h1>Fluid jumbotron</h1>
<p>This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
</div>
<section class="sec1" id="explore">
<div class="container">
<div class="row">
<div class="offset-sm-2 col-sm-8">
<div class="headerText text-center">
<h2>Explotre the world please</h2>
<p>This is a modified jumbotron that occupies the entire horizontal space of its
parent.This is a modified jumbotron that occupies the entire horizontal space of its
parent.This is a modified jumbotron that occupies the entire horizontal space of its
parent.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="placebox">
<div class="imgBox">
<img src="assets/home_beach.jpg" class="img-fluid">
</div>
<div class="content">
<h3>Country name<br><span>Place Name</span></h3>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="placebox">
<div class="imgBox">
<img src="assets/home_beach.jpg" class="img-fluid">
</div>
<div class="content">
<h3>Country name<br><span>Place Name</span></h3>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="placebox">
<div class="imgBox">
<img src="assets/home_beach.jpg" class="img-fluid">
</div>
<div class="content">
<h3>Country name<br><span>Place Name</span></h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sec2" id="adventure">
<div class="container h100">
<div class="contentBox h100">
<div>
<h1>Adventure is everywhere</h1>
<p>This is a modified jumbotron that occupies the entire horizontal space of its
parent.This is a modified jumbotron that occupies the entire horizontal space of its
parent.This is a modified jumbotron that occupies the entire horizontal space of its
parent.This is a modified jumbotron that occupies the entire horizontal space of its
parent.This is a modified jumbotron that occupies the entire horizontal space of its
parent.</p>
<a href="#" class="btn btnD1">Read More</a>
</div>
</div>
</div>
</section>
<section class="blogpost" id="blog">
<div class="container">
<div class="row">
<div class="offset-sm-2 col-sm-8">
<div class="headerText">
<h2>This is our latest blog</h2>
<p>This is a modified jumbotron that occupies the entire horizontal space of its
parent.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="blogPost">
<div class="imgBox">
<img src="assets/home_beach.jpg" class="img-fluid">
</div>
<div class="content">
<h1>This is blog1</h1>
<p>This is a modified jumbotron that occupies the entire horizontal space of its
parent.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="blogPost">
<div class="imgBox">
<img src="assets/home_beach.jpg" class="img-fluid">
</div>
<div class="content">
<h1>This is blog1</h1>
<p>This is a modified jumbotron that occupies the entire horizontal space of its
parent.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="blogPost">
<div class="imgBox">
<img src="assets/home_beach.jpg" class="img-fluid">
</div>
<div class="content">
<h1>This is blog1</h1>
<p>This is a modified jumbotron that occupies the entire horizontal space of its
parent.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="blogPost">
<div class="imgBox">
<img src="assets/home_beach.jpg" class="img-fluid">
</div>
<div class="content">
<h1>This is blog1</h1>
<p>This is a modified jumbotron that occupies the entire horizontal space of its
parent.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="headerText text-center">
<h2>This is our contact page</h2>
<p>This is a modified jumbotron that occupies the entire horizontal space of its
parent.</p>
</div>
</div>
</div>
<div class="row">
<div class=" offset-sm-2 col-sm-8">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="sco">
<li><a href=""><i class="fa fa-address-book" aria-hidden="true"></i>
</a></li>
<li><a href=""><i class="fa fa-address-book" aria-hidden="true"></i>
</a></li>
<li><a href=""><i class="fa fa-address-book" aria-hidden="true"></i>
</a></li>
<li><a href=""><i class="fa fa-address-book" aria-hidden="true"></i>
</a></li>
<li><a href=""><i class="fa fa-address-book" aria-hidden="true"></i>
</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"
integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em"
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).scroll(function () {
$('.navbar').toggleClass('scrolled', $(this).scrollTop() > $('.navbar').height());
})
</script>
</body>
</html>
Please find running example code: Codepen
735
The problem is the scrolled class is being applied at the start.
Simply add $(".navbar").removeClass('scrolled'); in your script so that it won't start with a black background. ^^
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
