Change the fixed navbar's classes depending on the background of the page section it hovers
I'm thinking i'd be easier to properly exploit Bootstrap scrollspy's "activate.bs.scrollspy" event rather than "breaking its rules" and simply override the default href navigation with javascript code.
So i'd suggest you add back the id's to the divs and the matching framgment hrefs to the anchors, let Bootstrap give you the target in the "activate.bs.scrollspy" event via the obj.relatedTarget property, toggle the classes as needed and optionally remove the "activated" class from the nav items so it doesn't appear like the sections are related. If you have additional sections, try using hidden anchors or a hidden nav altogether.
Of course, the cleanest way would be in my opinion to ditch the scrollspy and use window.scrollY and $(window).on('scroll', ...).
Check out the snippet:
$(window).on('activate.bs.scrollspy', function (e, obj) { if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { return; }
var isBGLight = $(obj.relatedTarget).hasClass('bg-light'); $('.navbar').toggleClass('navbar-dark bg-dark', isBGLight) .toggleClass('navbar-light bg-light', !isBGLight);
//Optional: Remove the active class from the anchor so it doesn't look like the nav is linked to the sections $('.navbar-nav a[href="' + obj.relatedTarget + '"]').removeClass('active');});
//Here we do the actual navigation$('.navbar-nav a').click(function(e) { //Prevent anchor's default behaviour of briefly jumping to the given section before navigating to another page e.preventDefault(); //Substring to eliminate the leading "#" window.location.href = $(e.target).attr('href').substring(1) + '.html';}).page-section { padding: 70px 10px}
.page-section.bg-dark * { color: #fff;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="15"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <a class="navbar-brand" href="#">Logo</a> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <!--Notice I changed the hrefs to point to the div ids--> <a class="nav-link" href="#about">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#services">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li> </ul> </nav>
<!--Notice I added the id's to let Bootstrap do it's job--> <div id="about" class="container-fluid bg-light page-section"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="services" class="container-fluid bg-dark page-section"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="contact" class="container-fluid bg-light page-section"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div></body>Use scroll-spy to change the navbar background classes
There's no built-in way to change the target of the active class, so you're left with a javascript option. Fortunately, Bootstrap 4 does provide an event that gets triggered when a new active item is set. One odd quark with it is that the documentation suggests you can add the listener event to the element with data-spy. This does not work. You have to add it to the window object (https://stackoverflow.com/a/48694139/854246). Here's a code snippet:
$(window).on('activate.bs.scrollspy', function (e,obj) { // spy changes to the last item at the end of the page, // so we want to avoid changing the class at this point. // Spy still works, but we want the class to be based on // whatever block was closest. // https://stackoverflow.com/a/40370876/854246 if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) { return; }
// Here we detect the targets class. I'm just using bg- // light. Not the most robust solution, but it can be // tweaked. var isBGLight = $(obj.relatedTarget).hasClass('bg-light'); // note that navbar needs two classes to work. If you // only set bg-light/bg-dark, the link text color doesn't // change. $('.navbar').toggleClass('navbar-dark bg-dark', isBGLight) .toggleClass('navbar-light bg-light', !isBGLight);});.page-section { padding: 70px 10px}
.page-section.bg-dark * { color: #fff;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target=".navbar" data-offset="15"> <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#section1">Section 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#section2">Section 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#section3">Section 3</a> </li> </ul> </nav>
<div id="section1" class="container-fluid bg-light page-section"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section2" class="container-fluid bg-dark page-section"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="section3" class="container-fluid bg-light page-section"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div></body>Change navbar background color on page scroll
This is what your current function and css does on a page that has a <div> with id=startchange. On page load the navbar is not transparent. As soon as you scroll the navbar becomes transparent (border still visible) and once the <div> with id=startchange passes the top of the page you navbar becomes non transparent again.
If you make your css more specific you can get the navbar to be transparent to start with no border (at larger screen sizes, you might want to look at how its styled for smaller screens too).
$(document).ready(function(){ var scroll_start = 0; var startchange = $('#startchange'); var offset = startchange.offset(); if (startchange.length){ $(document).scroll(function() { scroll_start = $(document).scrollTop(); if(scroll_start > offset.top) { $(".navbar").css('background-color', '#f0f0f0'); } else { $('.navbar').css('background-color', 'transparent'); } }); } });.navbar.navbar-default.navbar-fixed-top { background-color: transparent; border-color: transparent; -webkit-transition: background-color 2s; /* Safari */ transition: background-color 2s; }
.navbar-toggle:hover, .navbar-default .navbar-toggle:focus{ background-color: transparent !important;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header "> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div>
<div id="navbarNav" class="navbar-collapse collapse "> <br/><br/> <ul class="nav navbar-nav navbar-right "> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">CALCULATORS</a></li> </ul> </div> </div> </nav> <div id="page"> Page Top <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id="startchange">Start Change Div</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> Page Bottom </div></div>HTML navbar not changing background color upon hover
The reason it cannot work because you are not using SCSS, you are using css and it does not support nested syntax like:
.et-hero-tab {
...
&:hover {
color: #FF0000;
background: rgba(102, 177, 241, 0.8);
transition: all 0.5s ease;
}
}
change the styles of hover to:
.et-hero-tab:hover {
color: #FF0000;
background: rgba(102, 177, 241, 0.8);
transition: all 0.5s ease;
}
Content div going over fixed navbar
In order to fix this you need the property z-indexdefined by W3 that specify the level of the element. Try this:
#navbar {
background-color:#990000;
position:fixed;
z-index:1; /*Add this*/
width:100%;
height:50px;
text-align:center;
vertical-align:middle;
line-height:50px;
top:0px;
}
want to change the navbar font color when it reaches another section with a different background
You can just style the class based on the sections offset to the viewport via JS:
document.onscroll = function() {
const specs = document.querySelector('#specs');
const nav = document.querySelector('nav');
if(specs.getBoundingClientRect().top <= 0) { // if the distance of the 'specs' section to the browser top is smaller than 0
nav.classList.add('dark'); // add dark font color
} else {
nav.classList.remove('dark'); // remove dark font color
}
}*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: black;
font-family: 'Poppins', sans-serif;
}
section{
height:100vh ;
}
nav{
position: fixed;
z-index: 1;
}
li {
display: inline-block;
}
nav a:hover{
opacity: 0.8;
}
video::-webkit-media-controls {
display:none ;
}
.specs{
background: white;
}
/* IMPORTANT CSS */
nav a {
color: white;
text-decoration: none;
font-size: 1.4rem;
margin-left: 10vh;
position: relative;
top: 5vh;
left: 55vh;
}
nav.dark a {
color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mohamed amine wannes project</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<section class="homepage" id="homepage">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="#specs">Specs</a></li>
<li><a href="">Models</a></li>
<li><a href="">Pricing</a></li>
</ul>
</nav>
</section>
<section class="specs" id="specs">
<nav class="specsNav">
<ul>
<li><a href="">Home</a></li>
<li><a href="#specs">Specs</a></li>
<li><a href="">Models</a></li>
<li><a href="">Pricing</a></li>
</ul>
</nav>
</section>
<script src="app.js"></script>
</body>
</html>Related Topics
Modify Pseudo Select :After in JavaScript
Gulp Less Not Handling Includes Properly, Included Variables Not Defined
How to Activate a CSS3 (Webkit) Animation Using JavaScript
Align Select-Options Text to Right
Detect Support for Background-Size: Cover
Jquery .Css() Function with Variables and Multiple Values
Bootstrap Modal Makes Scrollbar Disappear After Closing
Svg Foreignobject Not Working Properly on Safari
Disable (Exclude) Bootstrap for One Div on a Page
Background Image Resizing to Fit
How to More Accurately Measure Svg Text Height
How to Center the Text in the Headers for an Ag-Grid Control
Apply CSS to Active Router Link [Angular 2]
Variable in JavaScript Statement
Nav-Collapse Not Working [Twitter Bootstrap]
Is There Js Plugin Convert the Matrix Parameter to CSS3 Transform Property