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

User · Answer

window addEventListener  scroll   function  e            var nav   document getElementById  nav            if  document documentElement scrollTop    document body scrollTop  gt  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

User · Answer

x000D   x000D    window  on  activate bs scrollspy   function  e obj    x000D   x000D    if   window innerHeight   window pageYOffset   gt   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    gt  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  lt  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  lt   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  lt   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    lt  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   x000D   x000D    the solutions  maybe

User · Answer

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  gt  50         navbar classList add  active       else if  navbar classList contains  active          navbar classList remove  active       else       navbar classList remove  active

User · Answer

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   lt script gt      document  ready function       window  scroll function       var scroll     window  scrollTop         if scroll gt 50             nav   css  background     555                    else             nav   css  background    transparent                             lt  script gt

User · Answer

x000D   x000D    document  ready function    x000D          window  scroll function     x000D          if    document  scrollTop    gt 1290      x000D                navbar-fixed-top   css  background-color    rgb 255  160  160      x000D           else if    document  scrollTop    gt 850     x000D                  navbar-fixed-top   css  background-color    black     x000D             else if    document  scrollTop    gt 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   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 4 0 css font-awesome min css  rel  stylesheet    gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet    gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 2 4 jquery min js  gt  lt  script gt  x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D     lt meta charset  UTF-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1 0  gt  x000D     lt meta http-equiv  X-UA-Compatible  content  ie edge  gt  x000D     lt title gt Document lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt header gt  x000D       lt nav class  navbar navbar-default navbar-fixed-top  role  navigation  gt  x000D         lt div class  container  gt  x000D           lt div class  navbar-header  gt  x000D             lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   collapse  aria-expanded  false  gt  x000D             lt span class  sr-only  gt Toggle navigation lt  span gt  x000D             lt span class  icon-bar  gt  lt  span gt  x000D             lt span class  icon-bar  gt  lt  span gt  x000D             lt span class  icon-bar  gt  lt  span gt  x000D           lt  button gt  x000D             lt a class  navbar-brand  href   featured  gt Portfolio lt  a gt  x000D           lt  div gt  x000D           lt  -- navbar-header -- gt  x000D           lt div class  collapse navbar-collapse  id  collapse  gt  x000D             lt ul class  nav navbar-nav navbar-right  gt  x000D               lt li class  active  gt  lt a href   home  gt Home lt  a gt  lt  li gt  x000D               lt li gt  lt a href   about  gt About lt  a gt  lt  li gt  x000D               lt li gt  lt a href   portfolio  gt Portfolio lt  a gt  lt  li gt  x000D               lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt  x000D             lt  ul gt  x000D           lt  div gt  x000D           lt  -- collapse navbar-collapse -- gt  x000D   x000D         lt  div gt  x000D         lt  -- container -- gt  x000D       lt  nav gt  x000D     lt  header gt  x000D   x000D     lt div class  main  gt  x000D       lt div class  row   id  home  data-speed  2  data-type  background  gt  x000D         lt div class  container  gt  x000D           lt h2 class  text-center  gt Welcome to my portfolio lt  h2 gt  x000D           lt h4 class  text-center  gt Where awesomeness is crafted lt  h4 gt  x000D           lt hr gt  x000D           lt ul gt  x000D             lt li gt  lt a href  https   github com vamshi121  class  btn btn-primary  gt  lt i class  fa fa-github  gt  lt  i gt  GitHub lt  a gt  lt  li gt  x000D             lt li gt  lt a href  https   tn linkedin com in mannemvamshi  class  btn btn-primary  gt  lt i class  fa fa-linkedin  gt  lt  i gt  LinkedIn lt  a gt  lt  li gt  x000D             lt li gt  lt a href  https   freecodecamp com   class  btn btn-primary  gt  lt i class  fa fa-fire  gt  lt  i gt  FreeCodeCamp lt  a gt  lt  li gt  x000D   x000D           lt  ul gt  x000D         lt  div gt  x000D         lt  --container-- gt  x000D   x000D       lt  div gt  x000D       lt  --home-- gt  x000D       lt div class  row  id  about  data-speed  2  data-type  background  gt  x000D         lt div class  container  gt  x000D           lt div class  row  gt  x000D             lt div class  col-md-5 col-md-offset-1  gt  x000D               lt h2 gt About me lt  h2 gt  x000D               lt p gt 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                 lt  marquee gt  x000D             lt  div gt  x000D             lt  p gt  x000D             lt p gt My skills are  x000D               lt ul gt  x000D                 lt li gt  Front-end   HTML5  CSS3   jQuery  Bootstrap  AngularJS lt  li gt  x000D                 lt li gt Back-end  Ruby on Rails lt  li gt  x000D                 lt li gt Methodology  Agile  TDD lt  li gt  x000D               lt  ul gt  x000D             lt  p gt  x000D           lt  div gt  x000D           lt  --col-md-5-- gt  x000D           lt div class  col-md-4 col-md-offset-1  gt  x000D             lt img class  img-circle img-style hidden-xs  src  https   www triketech site images log png    gt  x000D           lt  div gt  x000D         lt  div gt  x000D         lt  --row-- gt  x000D       lt  div gt  x000D       lt  --container-- gt  x000D     lt  div gt  x000D     lt  --about-- gt  x000D     lt div class  row  id  portfolio  data-speed  2  data-type  background  gt  x000D       lt div class  container  gt  x000D         lt h2 class  text-center  gt Portfolio projects lt  h2 gt  x000D         lt div class  row  gt  x000D           lt div class  col-md-12  gt  x000D             lt div class  block  gt  x000D               lt div class  portfolio-contant  gt  x000D                 lt ul id  portfolio-contant-active  gt  x000D                   lt li class  mix Branding  gt  x000D                     lt a href     gt  x000D                       lt img src     alt    gt  x000D                       lt div class  overly  gt  x000D                         lt div class  position-center  gt  x000D                           lt h2 gt Local Support lt  h2 gt  x000D   x000D   x000D                         lt  div gt  x000D                       lt  div gt  x000D                       lt  --overly-- gt  x000D                     lt  a gt  x000D                   lt  li gt  x000D                 lt  ul gt  x000D               lt  div gt  x000D               lt  --portfolio-contant-- gt  x000D             lt  div gt  x000D             lt  --block-- gt  x000D           lt  div gt  x000D           lt  --col-- gt  x000D         lt  div gt  x000D         lt  --row-- gt  x000D       lt  div gt  x000D       lt  --container-- gt  x000D     lt  div gt  x000D     lt  --portfolio-- gt  x000D     lt div class  row  id  contact  data-speed  2  data-type  background  gt  x000D       lt div class  container  gt  x000D         lt div class  col-md-4 col-md-offset-1  gt  x000D           lt h3 gt Contact me at  lt  h3 gt  x000D           lt h3 gt thegreatvamshi triketech com lt  h3 gt  x000D         lt  div gt  x000D         lt  --col-md-4-- gt  x000D       lt  div gt  x000D       lt  --container-- gt  x000D     lt  div gt  x000D     lt  --contact-- gt  x000D     lt  div gt  x000D     lt  --main-- gt  x000D     lt footer gt  x000D       lt ul gt  x000D         lt li gt  lt a href   home  gt Home lt  a gt   lt  li gt  x000D         lt li gt  lt a href   about  gt About lt  a gt   lt  li gt  x000D         lt li gt  lt a href   portfolio  gt Portfolio lt  a gt   lt  li gt  x000D         lt li gt  lt a href   contact  gt Contact lt  a gt   lt  li gt  x000D       lt  ul gt  x000D       lt p class  text-center  gt Copyright  amp copy  - All Rights Reserved   lt  p gt  x000D     lt  footer gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D     lt script gt         document  ready function            window  scroll function             if    document  scrollTop    gt 1920                    navbar-fixed-top   css  background-color    rgb 255  160  160                else if    document  scrollTop    gt 1580                     navbar-fixed-top   css  background-color    black               else if    document  scrollTop    gt 620                     navbar-fixed-top   css  background-color    rgba 47  73  158  0 514                else                 navbar-fixed-top   css  background-color    transparent                                  lt  script gt

User · Answer

this is a simple pure javascript   var myNav   document getElementById  mynav    window onscroll   function            use strict       if  document body scrollTop  gt   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  gt   200    document documentElement scrollTop  gt   200     sure you must have 2 classes   nav-colored   background-color  000     nav-transparent   background-color transparent

User · Answer

lt script gt        document  ready function            window  scroll function        check if scroll event happened         if    document  scrollTop    gt  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                              lt  script gt

User · Answer

i think this solution is shorter and simpler than older answers  This is Js Code  const navbar   document querySelector   nav-fixed    window onscroll        gt        if  window scrollY  gt  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

User · Answer

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  lt   150       Just an example         nav style backgroundColor     000      or default color       else           nav style backgroundColor    transparent

User · Answer

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  gt  offset top                  navbar-default   css  background-color     f0f0f0             else                 navbar-default   css  background-color    transparent

User · Answer

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    lt body gt    lt header class  GreyHeader  gt   lt  header gt     lt  body gt    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  gt   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

User · Answer

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

User · Answer

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    gt    window  height                     menu   css   background-color   transparent                          else                  menu   css   background-color   white

User · Answer

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  x000D   x000D  var navbar   document querySelector  nav   x000D   x000D  window onscroll   function     x000D   x000D       pageYOffset or scrollY x000D    if  window pageYOffset  gt  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   lt nav gt  lt  nav gt  x000D   lt main gt  lt  main gt  x000D   x000D   x000D

User · Answer

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    lt header class  site-header  gt     lt div class  logo  gt     lt  div gt     lt nav gt navigation lt  nav gt   lt  header gt    lt article gt    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  lt  article gt    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    gt    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

User · Answer

How about the Intersection Observer API  This avoids the potential sluggishness from using the scroll event  HTML  lt nav class  quot navbar-fixed-top quot  gt Navbar lt  nav gt   lt main gt     lt div class  quot content quot  gt Some content lt  div gt   lt  main gt   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    gt      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   quot -60px 0px 0px 0px quot     threshold   1       You can see all the above in action on CodePen  Kevin Powell also has a good explanation on this  Github  amp  YouTube

User · Answer

Check jquery waypoints here  Fiddle for example JSFiddle  When is scrolled to certain div  change your background color in jquery

[javascript] Changing nav-bar color after scrolling?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to twitter-bootstrap