Changing nav-bar color after scrolling?

Question

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.

Could you provide us with the code that you have tried on your own? — andrejohannsen217, May 16 '14 at 23:34
You could probably do a combination with affix and checking if it's the bottom of the page on jquery. Then an if statement that if it's the bottom, change the class of the navbar. — andrejohannsen217, May 16 '14 at 23:50

score 143 · Answer 1 · answered Dec 08 '16 at 10:40

143

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

answered Dec 08 '16 at 10:40

OzzyCzech

9,713
3
50
34

How can I use this function so as to change the color of the navbar when I click to expand it? – Benisburgers Nov 05 '18 at 15:53
3

Hi ! I just wanted to add for anyone coming here in the future : Don't forget to add ".navbar-fixed-top{ transition:background-color 200ms linear; }" So that when u scroll back up there's no insta-backgroundcolor – Quibble Dec 22 '18 at 00:06
Greetings! I've been loving this method for awhile now but w/ the latest Bootstrap 5 somehow the "scrolled" class isn't applying to the navbar after scrolling and it might be because of how jQuery is being called in v5. Any idea on how this could be adapted? Thanks! – Mawkus Jan 22 '21 at 20:54
Wow this solution is pure genius... so simple and works. Thank you. – Ben Viatte Sep 28 '21 at 11:40

Yahya Essam · Answer 2 · 2023-05-03T19:18:04.617

This is a simple, pure Javascript

const nav = document.getElementById('mynav');
window.onscroll = function () { 
    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 a 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 two CSS classes.

.nav-colored { background-color:#000; }
.nav-transparent { background-color:transparent;}

Update: better solution

for performance reasons and because listening to scroll event is not the best way to do this, here's a better solution using the: IntersectionObserver API

Let's say we have the header section (the hero section), and we want to change the nav color when the user scrolls to the end of this header section.

const nav = document.getElementById('mynav');
const header = document.querySelector('.header');
const navHeight = nav.getBoundingClientRect().height;

function updateNavColor(entries) {
  const [entry] = entries;
  if(!entry.isIntersecting) {
    nav.classList.add("nav-colored");
    nav.classList.remove("nav-transparent");
  } else {
    nav.classList.add("nav-transparent");
    nav.classList.remove("nav-colored");
  }
  
}

const headerObserver = new IntersectionObserver(updateNavColor, {
  root: null,
  threshold: 0,
  rootMargin: `-${navHeight}px`
});

headerObserver.observe(header)

comparison between scroll listener and intersection observer

That's a good pure JS solution but the else part should be: `.add("nav-transparent");` and `.remove("nav-colored");` — Vasilis Tsirimokos, Oct 15 '16 at 11:29
Up voting for more relvant intercestion observer solution! +1 — Syed, Aug 19 '23 at 21:46

DylanH · Answer 3 · 2014-05-19T22:40:58.400

45

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');
       }
   });
    }
});

edited May 19 '14 at 22:40

answered May 17 '14 at 00:02

DylanH

879
1
7
13

1

hey this worked fine BUT scroll_start > 70 i had to change 70 to 950 After trying it in other monitor its not the same position where the background color change .. – user3641208 May 17 '14 at 00:10
Let me try editing the fiddle to use offset, I will post a link when i change it – DylanH May 17 '14 at 00:33
[new js fiddle](http://jsfiddle.net/dylanholmes222/LaL3v/1/) This will allow you to use an id in your html, like a
or
, to set the change height instead of setting a pixel value
– DylanH May 17 '14 at 00:53
Weird! i was thinking this will solve it but when i change the navigator size the background color change after passing the #startchange .. btw the jumbotron is height:100vh; thi could be a problem? – user3641208 May 17 '14 at 01:02
hmm... let me try to implement this in my bootstrap example – DylanH May 17 '14 at 01:05
Works fine :( so its an error from my codes? idkk .. how can we fix this ? can you check the codes of my website http://attafothman.olympe.in/ and try to figure it out? oh god really sorry for this .. But this thing is taking me crazy, thank you anyway @dylpickle – user3641208 May 17 '14 at 01:25
I will take a look at your source code later tonight and post if I find something – DylanH May 17 '14 at 04:37
I couldn't find the above code anywhere in your site. From what i did see, the nav was different from my example (you are using nav-default). So I updated my code, and try placing an id="startchange" on the div under the div with the id="latest-work". It is possible the scrolling JS script you have attached is messing with this code, but i am not sure with out trying to implement this myself. Hope this helps. – DylanH May 19 '14 at 22:44

score 32 · Answer 4 · answered Jul 16 '20 at 13:58

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;
}

Actually this code is quite clear. I used Yahya's and your solution and merged to use it to add 'bg-dark' and remove 'bg-transparent'for the bootstrap class. Thanks — Nikash Deka, Sep 02 '22 at 14:58

score 16 · Answer 5 · answered Dec 18 '19 at 17:54

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>

score 10 · Answer 6 · edited Jul 26 '16 at 09:44

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"});
        }

    })
})

but how do i specify the height at which the scroll function change should take place... seems I have to scroll a bit lover before it kicks in. Gracias — Fillz Adebayo, Mar 16 '21 at 19:46

szharas · Answer 7 · 2015-12-20T06:06:30.040

10

<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>

edited Dec 20 '15 at 06:06

answered Dec 18 '15 at 20:16

szharas

121
1
5

Welcome to Stack Overflow. You should consider adding a bit more explanation. Code-only answers tend to get downvoted. – Olivier De Meulder Dec 18 '15 at 20:32

score 7 · Answer 8 · answered Nov 27 '20 at 00:04

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:

the first time the observer is initially asked to watch the target element
when content div is no longer fully visible (due to threshold: 1)
when content div becomes fully visible (due to threshold: 1)

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).

score 6 · Answer 9 · edited May 23 '17 at 12:10

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

score 5 · Answer 10 · answered Aug 20 '18 at 11:18

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';
    }
});

Smakosh · Answer 11 · 2018-10-15T23:01:18.957

3

So I'm using querySelector to get the navbar
I added a scroll event to the window to track the scrollY property
I check if it's higher than 50 then I add the active class to the navbar, else if it contains it already, I simply remove it and I'm pretty sure the conditions can be more currated and simplified.

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')
  }
})

edited Oct 15 '18 at 23:01

answered Oct 14 '18 at 22:28

Smakosh

1,034
12
13

Welcome to StackOverflow! Can you provide more information? Like what this code does and how it helps to fix the problem? – DarkSuniuM Oct 14 '18 at 22:47
1- So I'm using querySelector to get the navbar 2- I added a scroll event to the window to track the scrollY property 3- I check if it's higher than 50 then I add the `active` class to the navbar, else if it contains it already, I simply remove it and I'm pretty sure the conditions can be more currated and simplified. – Smakosh Oct 14 '18 at 22:57
1

Thanks, But add it to your answer, so it will be more helpful – DarkSuniuM Oct 14 '18 at 22:58

score 2 · Answer 12 · answered Nov 07 '18 at 16:00

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);

score 2 · Answer 13 · answered Mar 16 '21 at 19:56

First things first, you have to include Jquery into your HTML file or whatever file you are using.
create a script code space in the head part of your file and include the code below.

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > 100){
            $(".navbar").css({"background-color":"black"});   
        }
        else{
            $(".navbar").css({"background-color":""});
        }

    })
})

With this where the code says ($(window).scrollTop() > 100) 100 is in "px" so you can specify the height at which the function is called.

This line of code $(".navbar").css({"background-color":"black"}); is where you replace your class name of the Nav element. This is just directly accessing the CSS and then editing the CSS.

HTML Code Below

<header class="hero">
        <nav class="navbar ">
            <div class="container">
              <a class="navbar-brand" href="#"> 
                <img src="" alt=""> </a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">TV shows</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Movies</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">News and Popular</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">My List</a>
                  </li>
                 
                </ul>
                
                
              </div>
            </div>
</nav>
</header>

score 1 · Answer 14 · answered Oct 16 '19 at 12:46

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/

vamshi mannem · Answer 15 · 2020-01-25T20:03:21.200

$(document).ready(function(){
      $(window).scroll(function() {
        if ($(document).scrollTop() >1290 ) { 
          $(".navbar-fixed-top").css("background-color", "rgb(255, 160, 160)"); 
        }else if ($(document).scrollTop() >850) { 
            $(".navbar-fixed-top").css("background-color", "black"); 
          }else if ($(document).scrollTop() >350) { 
            $(".navbar-fixed-top").css("background-color", "rgba(47, 73, 158, 0.514)"); 
          }
         else {
          $(".navbar-fixed-top").css("background-color", "red"); 
        }
      });
    });

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Open+Sans);
body {
  font-family: "Roboto Slab", sans-serif;
  position: relative;
}

h1,
h2,
h3,
h4 {
  font-family: "Open Sans", sans-serif;
}

.main {
  padding-top: 50px;
}

#home {
  padding-top: 20%;
  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');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  height: 100vh;
}

#home h2 {
  color: white;
  font-size: 4em;
}

#home h4 {
  color: white;
  font-size: 2em;
}

#home ul {
  list-style-type: none;
  text-align: center;
}

#home li {
  padding-bottom: 12px;
  padding-right: 12px;
  display: inline;
}

#home li:last-child {
  padding: 0;
}

@media (max-width: 710px) {
  #home li {
    display: block;
  }
}

.img-style {
  height: 200px;
  width: 200px;
  margin-top: 50px;
}

#about {
  height: 100vh;
  padding-top: 10%;
  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');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  color: white;
}

#about p,
li {
  font-size: 17px;
}

.navbar.color-yellow {
  background-color: yellow;
  height: 50px;
  color: yellow;
}

.navbar.color-change {
  background-color: #f45b69;
  height: 50px;
  color: rgba(255, 254, 255, 0.8);
}

#portfolio {
  padding-top: 30px;
  rgba(226,
  226,
  226,
  1);
  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%);
  height: 100vh;
}

#portfolio .block .portfolio-contant ul li {
  float: left;
  width: 32.22%;
  overflow: hidden;
  margin: 6px;
  position: relative;
}

#portfolio .block .portfolio-contant ul li:hover .overly {
  opacity: 1;
}

#portfolio .block .portfolio-contant ul li:hover .position-center {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

#portfolio .block .portfolio-contant ul li a {
  display: block;
  color: #fff;
}

#portfolio .block .portfolio-contant ul li a h2 {
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#portfolio .block .portfolio-contant ul li a p {
  font-size: 15px;
}

#portfolio .block .portfolio-contant ul li a span {
  font-style: italic;
  font-size: 13px;
  color: #655E7A;
}

#portfolio .block .portfolio-contant ul img {
  width: 100%;
  height: auto;
}

#portfolio .block .portfolio-contant .overly {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
  text-align: center;
}

#portfolio .block .portfolio-contant .position-center {
  position: absolute;
  top: 50%;
  left: 10%;
  -webkit-transform: translate(0%, 50%);
  -moz-transform: translate(0%, 50%);
  -ms-transform: translate(0%, 50%);
  transform: translate(0%, 50%);
  -webkit-transition: .5s all;
  -o-transition: .5s all;
  transition: .5s all;
}

#contact {
  height: 100vh;
  padding-top: 10%;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://s32.postimg.org/ex6q1qxkl/pexels_photo.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
}

#contact h3 {
  color: white;
}

footer ul {
  list-style-type: none;
  text-align: center;
}

footer li {
  display: inline;
  padding-right: 10px;
}

footer li:last-child {
  padding: 0;
}

footer p {
  color: grey;
  font-size: 11px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <header>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
          <a class="navbar-brand" href="#featured">Portfolio</a>
        </div>
        <!-- navbar-header -->
        <div class="collapse navbar-collapse" id="collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
        <!-- collapse navbar-collapse -->

      </div>
      <!-- container -->
    </nav>
  </header>

  <div class="main">
    <div class="row " id="home" data-speed="2" data-type="background">
      <div class="container">
        <h2 class="text-center">Welcome to my portfolio</h2>
        <h4 class="text-center">Where awesomeness is crafted</h4>
        <hr>
        <ul>
          <li><a href="https://github.com/vamshi121" class="btn btn-primary"><i class="fa fa-github"></i> GitHub</a></li>
          <li><a href="https://tn.linkedin.com/in/mannemvamshi" class="btn btn-primary"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
          <li><a href="https://freecodecamp.com/" class="btn btn-primary"><i class="fa fa-fire"></i> FreeCodeCamp</a></li>

        </ul>
      </div>
      <!--container-->

    </div>
    <!--home-->
    <div class="row" id="about" data-speed="2" data-type="background">
      <div class="container">
        <div class="row">
          <div class="col-md-5 col-md-offset-1">
            <h2>About me</h2>
            <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
              expertise.
              </marquee>
          </div>
          </p>
          <p>My skills are:
            <ul>
              <li> Front-end : HTML5, CSS3 , jQuery, Bootstrap, AngularJS</li>
              <li>Back-end: Ruby on Rails</li>
              <li>Methodology: Agile, TDD</li>
            </ul>
          </p>
        </div>
        <!--col-md-5-->
        <div class="col-md-4 col-md-offset-1">
          <img class="img-circle img-style hidden-xs" src="https://www.triketech.site/images/log.png" />
        </div>
      </div>
      <!--row-->
    </div>
    <!--container-->
  </div>
  <!--about-->
  <div class="row" id="portfolio" data-speed="2" data-type="background">
    <div class="container">
      <h2 class="text-center">Portfolio projects</h2>
      <div class="row">
        <div class="col-md-12">
          <div class="block">
            <div class="portfolio-contant">
              <ul id="portfolio-contant-active">
                <li class="mix Branding">
                  <a href="#">
                    <img src="#" alt="">
                    <div class="overly">
                      <div class="position-center">
                        <h2>Local Support</h2>


                      </div>
                    </div>
                    <!--overly-->
                  </a>
                </li>
              </ul>
            </div>
            <!--portfolio-contant-->
          </div>
          <!--block-->
        </div>
        <!--col-->
      </div>
      <!--row-->
    </div>
    <!--container-->
  </div>
  <!--portfolio-->
  <div class="row" id="contact" data-speed="2" data-type="background">
    <div class="container">
      <div class="col-md-4 col-md-offset-1">
        <h3>Contact me at:</h3>
        <h3>thegreatvamshi@triketech.com</h3>
      </div>
      <!--col-md-4-->
    </div>
    <!--container-->
  </div>
  <!--contact-->
  </div>
  <!--main-->
  <footer>
    <ul>
      <li><a href="#home">Home</a> </li>
      <li><a href="#about">About</a> </li>
      <li><a href="#portfolio">Portfolio</a> </li>
      <li><a href="#contact">Contact</a> </li>
    </ul>
    <p class="text-center">Copyright &copy; - All Rights Reserved. </p>
  </footer>

</body>

</html>

<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>

Do you have anything you can add to your answer besides this code sample? Code samples with an explanation are considered more helpful. — Dan, Jan 24 '20 at 23:17

score 0 · Answer 16 · answered Jan 21 '20 at 20:19

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>

score -1 · Answer 17 · answered Dec 02 '18 at 07:00

$(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

Changing nav-bar color after scrolling?

17 Answers17

Update: better solution

Linked

Related