How can I set the navbar with no background color?
When scrolling down after a div the nav-bar gets a new background-color (the nav-bar should be fixed at top, I use navbar-fixed-top
in Bootstrap)
I've tried some tutorials but I didn't succeed.
This is the website : http://attafothman.olympe.in/
I'm talking about that black nav-bar on top.
This question is related to
javascript
jquery
html
css
twitter-bootstrap
i think this solution is shorter and simpler than older answers. This is Js Code:
const navbar = document.querySelector('.nav-fixed');
window.onscroll = () => {
if (window.scrollY > 300) {
navbar.classList.add('nav-active');
} else {
navbar.classList.remove('nav-active');
}
};
And my css:
header.nav-fixed {
width: 100%;
position: fixed;
transition: 0.3s ease-in-out;
}
.nav-active {
background-color:#fff;
box-shadow: 5px -1px 12px -5px grey;
}
<script>
$(document).ready(function(){
$(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
$(".navbar-fixed-top").css("background-color", "#f8f8f8"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
} else {
$(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
}
});
});
</script>
$(document).ready(function(){_x000D_
$(window).scroll(function() {_x000D_
if ($(document).scrollTop() >1290 ) { _x000D_
$(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)"); _x000D_
}else if ($(document).scrollTop() >850) { _x000D_
$(".navbar-fixed-top").css("background-color", "black"); _x000D_
}else if ($(document).scrollTop() >350) { _x000D_
$(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)"); _x000D_
}_x000D_
else {_x000D_
$(".navbar-fixed-top").css("background-color", "red"); _x000D_
}_x000D_
});_x000D_
});
_x000D_
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Open+Sans);_x000D_
body {_x000D_
font-family: "Roboto Slab", sans-serif;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
h1,_x000D_
h2,_x000D_
h3,_x000D_
h4 {_x000D_
font-family: "Open Sans", sans-serif;_x000D_
}_x000D_
_x000D_
.main {_x000D_
padding-top: 50px;_x000D_
}_x000D_
_x000D_
#home {_x000D_
padding-top: 20%;_x000D_
background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s31.postimg.org/l5q32ptln/coffee_cup_mug_apple.jpg');_x000D_
background-attachment: fixed;_x000D_
background-repeat: no-repeat;_x000D_
background-position: center center;_x000D_
position: relative;_x000D_
height: 100vh;_x000D_
}_x000D_
_x000D_
#home h2 {_x000D_
color: white;_x000D_
font-size: 4em;_x000D_
}_x000D_
_x000D_
#home h4 {_x000D_
color: white;_x000D_
font-size: 2em;_x000D_
}_x000D_
_x000D_
#home ul {_x000D_
list-style-type: none;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
#home li {_x000D_
padding-bottom: 12px;_x000D_
padding-right: 12px;_x000D_
display: inline;_x000D_
}_x000D_
_x000D_
#home li:last-child {_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
@media (max-width: 710px) {_x000D_
#home li {_x000D_
display: block;_x000D_
}_x000D_
}_x000D_
_x000D_
.img-style {_x000D_
height: 200px;_x000D_
width: 200px;_x000D_
margin-top: 50px;_x000D_
}_x000D_
_x000D_
#about {_x000D_
height: 100vh;_x000D_
padding-top: 10%;_x000D_
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://s32.postimg.org/sm6o6617p/photo_1432821596592_e2c18b78144f.jpg');_x000D_
background-attachment: fixed;_x000D_
background-repeat: no-repeat;_x000D_
background-position: center center;_x000D_
position: relative;_x000D_
color: white;_x000D_
}_x000D_
_x000D_
#about p,_x000D_
li {_x000D_
font-size: 17px;_x000D_
}_x000D_
_x000D_
.navbar.color-yellow {_x000D_
background-color: yellow;_x000D_
height: 50px;_x000D_
color: yellow;_x000D_
}_x000D_
_x000D_
.navbar.color-change {_x000D_
background-color: #f45b69;_x000D_
height: 50px;_x000D_
color: rgba(255, 254, 255, 0.8);_x000D_
}_x000D_
_x000D_
#portfolio {_x000D_
padding-top: 30px;_x000D_
rgba(226,_x000D_
226,_x000D_
226,_x000D_
1);_x000D_
background: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(209, 209, 209, 1) 25%, rgba(219, 219, 219, 1) 57%, rgba(254, 254, 254, 1) 100%);_x000D_
height: 100vh;_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant ul li {_x000D_
float: left;_x000D_
width: 32.22%;_x000D_
overflow: hidden;_x000D_
margin: 6px;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant ul li:hover .overly {_x000D_
opacity: 1;_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant ul li:hover .position-center {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
-webkit-transform: translate(0%, -50%);_x000D_
-moz-transform: translate(0%, -50%);_x000D_
-ms-transform: translate(0%, -50%);_x000D_
transform: translate(0%, -50%);_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant ul li a {_x000D_
display: block;_x000D_
color: #fff;_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant ul li a h2 {_x000D_
font-size: 22px;_x000D_
text-transform: uppercase;_x000D_
letter-spacing: 1px;_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant ul li a p {_x000D_
font-size: 15px;_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant ul li a span {_x000D_
font-style: italic;_x000D_
font-size: 13px;_x000D_
color: #655E7A;_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant ul img {_x000D_
width: 100%;_x000D_
height: auto;_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant .overly {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
bottom: 0;_x000D_
right: 0;_x000D_
left: 0;_x000D_
background: rgba(0, 0, 0, 0.9);_x000D_
opacity: 0;_x000D_
-webkit-transition: .3s all;_x000D_
-o-transition: .3s all;_x000D_
transition: .3s all;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
#portfolio .block .portfolio-contant .position-center {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 10%;_x000D_
-webkit-transform: translate(0%, 50%);_x000D_
-moz-transform: translate(0%, 50%);_x000D_
-ms-transform: translate(0%, 50%);_x000D_
transform: translate(0%, 50%);_x000D_
-webkit-transition: .5s all;_x000D_
-o-transition: .5s all;_x000D_
transition: .5s all;_x000D_
}_x000D_
_x000D_
#contact {_x000D_
height: 100vh;_x000D_
padding-top: 10%;_x000D_
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://s32.postimg.org/ex6q1qxkl/pexels_photo.jpg");_x000D_
background-attachment: fixed;_x000D_
background-size: cover;_x000D_
background-repeat: no-repeat;_x000D_
background-position: center center;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
#contact h3 {_x000D_
color: white;_x000D_
}_x000D_
_x000D_
footer ul {_x000D_
list-style-type: none;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
footer li {_x000D_
display: inline;_x000D_
padding-right: 10px;_x000D_
}_x000D_
_x000D_
footer li:last-child {_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
footer p {_x000D_
color: grey;_x000D_
font-size: 11px;_x000D_
}
_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1.0">_x000D_
<meta http-equiv="X-UA-Compatible" content="ie=edge">_x000D_
<title>Document</title>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<header>_x000D_
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">_x000D_
<div class="container">_x000D_
<div class="navbar-header">_x000D_
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">_x000D_
<span class="sr-only">Toggle navigation</span>_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
<span class="icon-bar"></span>_x000D_
</button>_x000D_
<a class="navbar-brand" href="#featured">Portfolio</a>_x000D_
</div>_x000D_
<!-- navbar-header -->_x000D_
<div class="collapse navbar-collapse" id="collapse">_x000D_
<ul class="nav navbar-nav navbar-right">_x000D_
<li class="active"><a href="#home">Home</a></li>_x000D_
<li><a href="#about">About</a></li>_x000D_
<li><a href="#portfolio">Portfolio</a></li>_x000D_
<li><a href="#contact">Contact</a></li>_x000D_
</ul>_x000D_
</div>_x000D_
<!-- collapse navbar-collapse -->_x000D_
_x000D_
</div>_x000D_
<!-- container -->_x000D_
</nav>_x000D_
</header>_x000D_
_x000D_
<div class="main">_x000D_
<div class="row " id="home" data-speed="2" data-type="background">_x000D_
<div class="container">_x000D_
<h2 class="text-center">Welcome to my portfolio</h2>_x000D_
<h4 class="text-center">Where awesomeness is crafted</h4>_x000D_
<hr>_x000D_
<ul>_x000D_
<li><a href="https://github.com/vamshi121" class="btn btn-primary"><i class="fa fa-github"></i> GitHub</a></li>_x000D_
<li><a href="https://tn.linkedin.com/in/mannemvamshi" class="btn btn-primary"><i class="fa fa-linkedin"></i> LinkedIn</a></li>_x000D_
<li><a href="https://freecodecamp.com/" class="btn btn-primary"><i class="fa fa-fire"></i> FreeCodeCamp</a></li>_x000D_
_x000D_
</ul>_x000D_
</div>_x000D_
<!--container-->_x000D_
_x000D_
</div>_x000D_
<!--home-->_x000D_
<div class="row" id="about" data-speed="2" data-type="background">_x000D_
<div class="container">_x000D_
<div class="row">_x000D_
<div class="col-md-5 col-md-offset-1">_x000D_
<h2>About me</h2>_x000D_
<p>Courteous and Enthusiastic,I'm interested in IT and around in its globe. I began to be fascinated by web programming i.e, building websites and developing cross-platform apps.I'm always looking for new ventures where i can learn evolve and_x000D_
expertise._x000D_
</marquee>_x000D_
</div>_x000D_
</p>_x000D_
<p>My skills are:_x000D_
<ul>_x000D_
<li> Front-end : HTML5, CSS3 , jQuery, Bootstrap, AngularJS</li>_x000D_
<li>Back-end: Ruby on Rails</li>_x000D_
<li>Methodology: Agile, TDD</li>_x000D_
</ul>_x000D_
</p>_x000D_
</div>_x000D_
<!--col-md-5-->_x000D_
<div class="col-md-4 col-md-offset-1">_x000D_
<img class="img-circle img-style hidden-xs" src="https://www.triketech.site/images/log.png" />_x000D_
</div>_x000D_
</div>_x000D_
<!--row-->_x000D_
</div>_x000D_
<!--container-->_x000D_
</div>_x000D_
<!--about-->_x000D_
<div class="row" id="portfolio" data-speed="2" data-type="background">_x000D_
<div class="container">_x000D_
<h2 class="text-center">Portfolio projects</h2>_x000D_
<div class="row">_x000D_
<div class="col-md-12">_x000D_
<div class="block">_x000D_
<div class="portfolio-contant">_x000D_
<ul id="portfolio-contant-active">_x000D_
<li class="mix Branding">_x000D_
<a href="#">_x000D_
<img src="#" alt="">_x000D_
<div class="overly">_x000D_
<div class="position-center">_x000D_
<h2>Local Support</h2>_x000D_
_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
<!--overly-->_x000D_
</a>_x000D_
</li>_x000D_
</ul>_x000D_
</div>_x000D_
<!--portfolio-contant-->_x000D_
</div>_x000D_
<!--block-->_x000D_
</div>_x000D_
<!--col-->_x000D_
</div>_x000D_
<!--row-->_x000D_
</div>_x000D_
<!--container-->_x000D_
</div>_x000D_
<!--portfolio-->_x000D_
<div class="row" id="contact" data-speed="2" data-type="background">_x000D_
<div class="container">_x000D_
<div class="col-md-4 col-md-offset-1">_x000D_
<h3>Contact me at:</h3>_x000D_
<h3>[email protected]</h3>_x000D_
</div>_x000D_
<!--col-md-4-->_x000D_
</div>_x000D_
<!--container-->_x000D_
</div>_x000D_
<!--contact-->_x000D_
</div>_x000D_
<!--main-->_x000D_
<footer>_x000D_
<ul>_x000D_
<li><a href="#home">Home</a> </li>_x000D_
<li><a href="#about">About</a> </li>_x000D_
<li><a href="#portfolio">Portfolio</a> </li>_x000D_
<li><a href="#contact">Contact</a> </li>_x000D_
</ul>_x000D_
<p class="text-center">Copyright © - All Rights Reserved. </p>_x000D_
</footer>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
<script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() >1920 ) {
$(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)");
} else if ($(document).scrollTop() >1580) {
$(".navbar-fixed-top").css("background-color", "black");
} else if ($(document).scrollTop() >620) {
$(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)");
} else {
$(".navbar-fixed-top").css("background-color", "transparent");
}
});
});
</script>
Here is a jsfiddle example. Using Jquery to change the background color based on scroll pixel position.
Here is a fiddle using bootstrap
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
I made this codepen to help you out!
const navbar = document.querySelector('#nav')
window.addEventListener('scroll', function(e) {
const lastPosition = window.scrollY
if (lastPosition > 50 ) {
navbar.classList.add('active')
} else if (navbar.classList.contains('active')) {
navbar.classList.remove('active')
} else {
navbar.classList.remove('active')
}
})
Slight variation to the above answers, but with Vanilla JS:
var nav = document.querySelector('nav'); // Identify target
window.addEventListener('scroll', function(event) { // To listen for event
event.preventDefault();
if (window.scrollY <= 150) { // Just an example
nav.style.backgroundColor = '#000'; // or default color
} else {
nav.style.backgroundColor = 'transparent';
}
});
How about the Intersection Observer API? This avoids the potential sluggishness from using the scroll event.
HTML
<nav class="navbar-fixed-top">Navbar</nav>
<main>
<div class="content">Some content</div>
</main>
CSS
.navbar-fixed-top--scrolled changes the nav bar background color. It's added to the nav bar when the content div is no longer 100% visible as we scroll down.
.navbar-fixed-top {
position: sticky;
top: 0;
height: 60px;
}
.navbar-fixed-top--scrolled {
/* change background-color to whatever you want */
background-color: grey;
}
JS
Create the observer to determine when the content div fully intersects with the browser viewport.
The callback function is called:
isIntersecting indicates whether the content div (the target element) is fully intersecting with the observer's root (the browser viewport by default).
// callback function to be run whenever threshold is crossed in one direction or the other
const callback = (entries, observer) => {
const entry = entries[0];
// toggle class depending on if content div intersects with viewport
const navBar = document.querySelector('.navbar-fixed-top');
navBar.classList.toggle('navbar-fixed-top--scrolled', !entry.isIntersecting);
}
// options controls circumstances under which the observer's callback is invoked
const options = {
// no root provided - by default browser viewport used to check target visibility
// only detect if target element is fully visible or not
threshold: [1]
};
const io = new IntersectionObserver(callback, options);
// observe content div
const target = document.querySelector('.content');
io.observe(target);
IntersectionObserver options
The nav bar currently changes background color when the content div starts moving off the screen.
If we want the background to change as soon as the user scrolls, we can use the rootMargin property (top, right, bottom, left) and set the top margin to negative the height of the nav bar (60px in our case).
const options = {
rootMargin: "-60px 0px 0px 0px",
threshold: [1]
};
You can see all the above in action on CodePen. Kevin Powell also has a good explanation on this (Github & YouTube).
$(window).on('activate.bs.scrollspy', function (e,obj) {_x000D_
_x000D_
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {_x000D_
return;_x000D_
}_x000D_
_x000D_
var isBGLight = $(obj.relatedTarget).hasClass('nav_white');_x000D_
var isBGDark = $(obj.relatedTarget).hasClass('nav_blue');_x000D_
$('.menu').removeClass('nav_white');_x000D_
$('.menu').removeClass('nav_blue');_x000D_
if(isBGDark)_x000D_
{_x000D_
$('.menu').addClass('nav_white');_x000D_
}else if(isBGLight)_x000D_
{_x000D_
$('.menu').addClass('nav_blue');_x000D_
}_x000D_
/*var isScrolled = $(document).scrollTop() > 1;_x000D_
$('.menu').toggleClass('scrolled', isScrolled);_x000D_
$(".demos").toggleClass("demo");_x000D_
$(".demos").toggleClass("demo1");_x000D_
var posicionActual = $(document).scrollTop();_x000D_
$.each($('.nav_transparent'),function(){_x000D_
if ($(this).position().top < posicionActual){_x000D_
$("nav.menu").removeClass("nav_white");_x000D_
$("nav.menu").removeClass("nav_blue");_x000D_
$("nav.menu").addClass("nav_transparent");_x000D_
$(".demos").removeClass("demo");_x000D_
$(".demos").addClass("demo1");_x000D_
$(".cls").removeClass("cls2");_x000D_
$(".cls").addClass("cls1");_x000D_
$(".cl").removeClass("cl2");_x000D_
$(".cl").addClass("cl1");_x000D_
$(".hamb-bottom").css({"background-color": "#fff"});_x000D_
$(".hamb-middle").css({"background-color": "#fff"});_x000D_
$(".hamb-top").css({"background-color": "#fff"});_x000D_
}_x000D_
});_x000D_
$.each($('.nav_blue'),function(){_x000D_
if ($(this).position().top <= posicionActual){_x000D_
$("nav.menu").removeClass("nav_transparent");_x000D_
$("nav.menu").removeClass("nav_white");_x000D_
$("nav.menu").addClass("nav_blue");_x000D_
$(".demos").removeClass("demo1");_x000D_
$(".demos").addClass("demo");_x000D_
$(".cls").removeClass("cls2");_x000D_
$(".cls").addClass("cls1");_x000D_
$(".cl").removeClass("cl2");_x000D_
$(".cl").addClass("cl1");_x000D_
$(".hamb-bottom").css({"background-color": "#fff"});_x000D_
$(".hamb-middle").css({"background-color": "#fff"});_x000D_
$(".hamb-top").css({"background-color": "#fff"});_x000D_
}_x000D_
});_x000D_
$.each($('.nav_white'),function(){_x000D_
if ($(this).position().top <= posicionActual){_x000D_
$("nav.menu").removeClass("nav_blue");_x000D_
$("nav.menu").removeClass("nav_transparent");_x000D_
$("nav.menu").addClass("nav_white");_x000D_
$(".demos").removeClass("demo");_x000D_
$(".demos").addClass("demo1");_x000D_
$(".cls").removeClass("cls1");_x000D_
$(".cls").addClass("cls2");_x000D_
$(".cl").removeClass("cl1");_x000D_
$(".cl").addClass("cl2");_x000D_
$(".hamb-bottom").css({"background-color": "#4285f4"});_x000D_
$(".hamb-middle").css({"background-color": "#4285f4"});_x000D_
$(".hamb-top").css({"background-color": "#4285f4"});_x000D_
}_x000D_
});*/_x000D_
});_x000D_
$(window).on("scroll", function(){_x000D_
if($(document).scrollTop() < 10)_x000D_
{_x000D_
$('.nav').removeClass('nav_white');_x000D_
$('.nav').removeClass('nav_blue');_x000D_
$('.nav').removeClass('nav_transparent');_x000D_
$('.nav').addClass('nav_transparent');_x000D_
}_x000D_
});
_x000D_
the solutions, maybe
I've recently done it slightly different to some of the examples above so thought I'd share, albeit very late!
Firstly the HTML, note there is only one class within the header:
<body>
<header class="GreyHeader">
</header>
</body>
And the CSS:
body {
height: 3000px;
}
.GreyHeader{
height: 200px;
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;
}
.FireBrickRed {
height: 100px;
background-color: #b22222;
position: fixed;
top:200;
width: 100%;
}
.transition {
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
}
The html uses only the class .greyHeader but within the CSS I have created another class to call once the scroll has reached a certain point from the top:
$(function() {
var header = $(".GreyHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('GreyHeader').addClass("FireBrickRed ");
header.addClass("transition");
} else {
header.removeClass("FireBrickRed ").addClass('GreyHeader');
header.addClass("transition");
}
});
});
check this fiddle: https://jsfiddle.net/29y64L7d/1/
this is a simple pure javascript
var myNav = document.getElementById('mynav');
window.onscroll = function () {
"use strict";
if (document.body.scrollTop >= 200 ) {
myNav.classList.add("nav-colored");
myNav.classList.remove("nav-transparent");
}
else {
myNav.classList.add("nav-transparent");
myNav.classList.remove("nav-colored");
}
};
in some chrome versions there is bug with:
document.body.scrollTop
so you may add a condition like this:
if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200 )
sure you must have 2 classes
.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}
First you make an id named nav (can change whatever you want) inside the nav div (exp: id="nav") Then at the bottom where body tag had been finished. You add this code
<script>
$(document).ready(function()
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll>50){
$("#nav").css("background", "#555");
}
else {
$("#nav").css("background", "transparent");
}
})
})
</script>
window.addEventListener('scroll', function (e) {
var nav = document.getElementById('nav');
if (document.documentElement.scrollTop || document.body.scrollTop > window.innerHeight) {
nav.classList.add('nav-colored');
nav.classList.remove('nav-transparent');
} else {
nav.classList.add('nav-transparent');
nav.classList.remove('nav-colored');
}
});
best approach to use event listener. especially for Firefox browser, check this doc Scroll-linked effects and Firefox is no longer support document.body.scrollTop
and alternative to use document.documentElement.scrollTop
. This is completes the answer from Yahya Essam
Today I've gone through the same question, how to change navbar background-color as scrolling. And I was seeking for a solution using CSS only, no jquery, no bootstrap nor javascript. But then it turned out couldn't be done with CSS only yet (as of today Dec 2019). And have to choose, I'll stick with the core technology - javascript instead of jquery or bootstrap unless it's far more complicated using js than the others. But luckily it's not.
Here's the code:
- It uses onscroll
/ scroll
event of window
to trigger the event listener.
- In the event listener, use pageYOffset
/ scrollY
of window
to check the scroll status.
Browser support are seemingly the same between both:
- https://caniuse.com/#search=pageYOffset
- https://caniuse.com/#search=scrollY
var navbar = document.querySelector('nav')_x000D_
_x000D_
window.onscroll = function() {_x000D_
_x000D_
// pageYOffset or scrollY_x000D_
if (window.pageYOffset > 0) {_x000D_
navbar.classList.add('scrolled')_x000D_
} else {_x000D_
navbar.classList.remove('scrolled')_x000D_
}_x000D_
}
_x000D_
body {_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
background: url(https://occ-0-325-395.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABaKr-dQAdVTt7fuGCgzntgBBrFce2DMW72dF86eO7EnXbFZvzmX2TPnQAg3HwAsvt7ZnDnP0nwuHOtPwpWGGOE22fXq2.webp?r=847) top/contain no-repeat;_x000D_
}_x000D_
_x000D_
nav {_x000D_
position: -webkit-sticky;_x000D_
position: sticky;_x000D_
/* sticky or fixed are fine */_x000D_
position: fixed;_x000D_
top: 0;_x000D_
height: 69px;_x000D_
width: 100%;_x000D_
background: linear-gradient(to bottom, #000, #0003 70%,#0000); /* background when scroll is in the top */_x000D_
transition: background .5s; /* control how smooth the background changes */_x000D_
}_x000D_
_x000D_
nav.scrolled {_x000D_
background: #0a0a0a;_x000D_
}_x000D_
_x000D_
main {_x000D_
height: 200vh;_x000D_
}
_x000D_
<nav></nav>_x000D_
<main></main>
_x000D_
This can be done using jQuery.
Here is a link to a fiddle.
When the window scrolls, the distance between the top of the window and the height of the window is compared. When the if statement is true, the background color is set to transparent. And when you scroll back to the top the color comes back to white.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height()){
$(".menu").css({"background-color":"transparent"});
}
else{
$(".menu").css({"background-color":"white"});
}
})
})
I use WordPress which comes with Underscore. So when you register your theme scripts, you would use 'jquery' and 'underscore' as the handle for the array of the dependancies. If you are not using WordPress, then make sure that you load both the jQuery framework and Underscore before your scripts.
CodePen: https://codepen.io/carasmo/pen/ZmQQYy
To make this demo (remember it requires both jQuery and Underscore).
HTML:
<header class="site-header">
<div class="logo">
</div>
<nav>navigation</nav>
</header>
<article>
Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling. Content with a forced height for scrolling
</article>
CSS:
body,
html {
margin: 0;
padding: 0;
font: 100%/180% sans-serif;
background: #eee;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
article {
height: 2000px;
padding: 5%;
background: #fff;
margin: 2% auto;
max-width: 900px;
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
}
.site-header {
background: #fff;
padding: 20px 5%;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.23);
transition: all .5s ease-in-out;
-web-kit-position: sticky;
position: sticky;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.logo {
background-image: url('the-path-to-the-logo.svg');
background-repeat: no-repeat;
background-position: center center;
width: 200px;
height: 60px;
background-size: contain;
transition: width .5s ease-in-out, height .5s ease-in-out;
}
.site-header nav {
text-align: right;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
}
.site-header.is-scrolling {
opacity: .8;
background: tomato;
padding: 10px 5%;
}
.site-header.is-scrolling .logo {
height: 40px;
width: 100px;
}
jQuery:
( function( window, $, undefined ) {
'use strict';
////////////// Begin jQuery and grab the $ ////////////////////////////////////////
$(document).ready(function() {
function is_scrolling() {
var $element = $('.site-header'),
$nav_height = $element.outerHeight( true );
if ($(this).scrollTop() >= $nav_height ) { //if scrolling is equal to or greater than the nav height add a class
$element.addClass( 'is-scrolling');
} else { //is back at the top again, remove the class
$element.removeClass( 'is-scrolling');
}
}//end is_scrolling();
$(window).scroll(_.throttle(is_scrolling, 200));
}); //* end ready
})(this, jQuery);
Here is simplest way how to change navbar color after window scroll:
Add follow JS to head:
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
and this CSS code
.navbar-fixed-top.scrolled {
background-color: #fff !important;
transition: background-color 200ms linear;
}
Background color of fixed navbar will be change to white when scroll exceeds height of navbar.
See follow JsFiddle
Source: Stackoverflow.com