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.
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
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');
}
});
}
});
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");
}
};
sure you must have 2 classes
.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}
<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>
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"});
}
})
})
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
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';
}
});
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')
window.onscroll = function() {
// pageYOffset or scrollY
if (window.pageYOffset > 0) {
navbar.classList.add('scrolled')
} else {
navbar.classList.remove('scrolled')
}
}body {
margin: 0;
padding: 0;
background: url(https://occ-0-325-395.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABaKr-dQAdVTt7fuGCgzntgBBrFce2DMW72dF86eO7EnXbFZvzmX2TPnQAg3HwAsvt7ZnDnP0nwuHOtPwpWGGOE22fXq2.webp?r=847) top/contain no-repeat;
}
nav {
position: -webkit-sticky;
position: sticky;
/* sticky or fixed are fine */
position: fixed;
top: 0;
height: 69px;
width: 100%;
background: linear-gradient(to bottom, #000, #0003 70%,#0000); /* background when scroll is in the top */
transition: background .5s; /* control how smooth the background changes */
}
nav.scrolled {
background: #0a0a0a;
}
main {
height: 200vh;
}<nav></nav>
<main></main>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);
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')
}
})
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/
Check jquery waypoints here
Fiddle for example JSFiddle
When is scrolled to certain div, change your background color in jquery.
$(window).on('activate.bs.scrollspy', function (e,obj) {
if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
return;
}
var isBGLight = $(obj.relatedTarget).hasClass('nav_white');
var isBGDark = $(obj.relatedTarget).hasClass('nav_blue');
$('.menu').removeClass('nav_white');
$('.menu').removeClass('nav_blue');
if(isBGDark)
{
$('.menu').addClass('nav_white');
}else if(isBGLight)
{
$('.menu').addClass('nav_blue');
}
/*var isScrolled = $(document).scrollTop() > 1;
$('.menu').toggleClass('scrolled', isScrolled);
$(".demos").toggleClass("demo");
$(".demos").toggleClass("demo1");
var posicionActual = $(document).scrollTop();
$.each($('.nav_transparent'),function(){
if ($(this).position().top < posicionActual){
$("nav.menu").removeClass("nav_white");
$("nav.menu").removeClass("nav_blue");
$("nav.menu").addClass("nav_transparent");
$(".demos").removeClass("demo");
$(".demos").addClass("demo1");
$(".cls").removeClass("cls2");
$(".cls").addClass("cls1");
$(".cl").removeClass("cl2");
$(".cl").addClass("cl1");
$(".hamb-bottom").css({"background-color": "#fff"});
$(".hamb-middle").css({"background-color": "#fff"});
$(".hamb-top").css({"background-color": "#fff"});
}
});
$.each($('.nav_blue'),function(){
if ($(this).position().top <= posicionActual){
$("nav.menu").removeClass("nav_transparent");
$("nav.menu").removeClass("nav_white");
$("nav.menu").addClass("nav_blue");
$(".demos").removeClass("demo1");
$(".demos").addClass("demo");
$(".cls").removeClass("cls2");
$(".cls").addClass("cls1");
$(".cl").removeClass("cl2");
$(".cl").addClass("cl1");
$(".hamb-bottom").css({"background-color": "#fff"});
$(".hamb-middle").css({"background-color": "#fff"});
$(".hamb-top").css({"background-color": "#fff"});
}
});
$.each($('.nav_white'),function(){
if ($(this).position().top <= posicionActual){
$("nav.menu").removeClass("nav_blue");
$("nav.menu").removeClass("nav_transparent");
$("nav.menu").addClass("nav_white");
$(".demos").removeClass("demo");
$(".demos").addClass("demo1");
$(".cls").removeClass("cls1");
$(".cls").addClass("cls2");
$(".cl").removeClass("cl1");
$(".cl").addClass("cl2");
$(".hamb-bottom").css({"background-color": "#4285f4"});
$(".hamb-middle").css({"background-color": "#4285f4"});
$(".hamb-top").css({"background-color": "#4285f4"});
}
});*/
});
$(window).on("scroll", function(){
if($(document).scrollTop() < 10)
{
$('.nav').removeClass('nav_white');
$('.nav').removeClass('nav_blue');
$('.nav').removeClass('nav_transparent');
$('.nav').addClass('nav_transparent');
}
});the solutions, maybe
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>
