How to pick up the scrollbar position with Javascript?

Question

I have the following page:

<style>
    navbar {
        color: #FFF;
        position: fixed;
        top: 0;
        width: 100%;
        height: 60px;
        background-color: #000;
    }

    section {
        width: 100%;
        height: 100vh;
    }

    #sec-1 {
        background-color: red;
    }

    #sec-2 {
        background-color: blue;
    }

    #sec-3 {
        background-color: green;
    }
</style>

<navbar>
    <a href="">Link 1</a>
    <a href="">Link 2</a>
    <a href="">Link 3</a>
</navbar>

<section id="sec-1"></section>
<section id="sec-2"></section>
<section id="sec-3"></section>

Depending on which section the scroll page is in, I would like to change the color of the navigation bar, as I could do this simply with Javascript?

Answer 1

The algorithm is simple in the event window.scroll it makes a set of checks to know about which element the <navbar> is:

• checks whether <navbar> this on #sec-1 if changes the color of <navbar> to red and abandons the event.

• checks whether <navbar> this on #sec-2 if changes the color of <navbar> to green and abandons the event.

• checks whether <navbar> this on #sec-3 if changes the color of <navbar> for azule abandons the event.

• if you’re not standing on any <navbar> changes color to black.

First the top and bottom initial values are calculated for each <section> and <navbar> using basic principles of geometry(top more the height element is equal to base position).

Already inside the event window.scroll the top and bottom values are recalculated with respect to screen scrolling and these values are compared only on the basis of why we can know about which <section> he is.

//Calcula os valores estáticos de topo e base para os elementos <section>
let sec1Top = $("#sec-1").offset().top
let sec1Botton = sec1Top + $("#sec-1").outerHeight()
let sec2Top = $("#sec-2").offset().top
let sec2Botton = sec2Top + $("#sec-2").outerHeight()
let sec3Top = $("#sec-3").offset().top
let sec3Botton = sec3Top + $("#sec-3").outerHeight()

//Calcula os valos estático de base para o elemento <navbar>({top: 0; position: fixed;})
let navHeight = $("navbar").outerHeight()


//No evento scroll da janela
$(window).scroll(function() {

  // o número de pixels rolados na janela
  let wst = $(window).scrollTop();

  // Calcula os valores dinâmicos de topo e base para os elementos <section> com relação o número de pixels rolados a janela
  let s1T = sec1Top - wst
  let s1B = sec1Botton - wst
  let s2T = sec2Top - wst
  let s2B = sec2Botton - wst
  let s3T = sec3Top - wst
  let s3B = sec3Botton - wst

  //Se a base do <navbar> estiver sobre #sec1 
  if (navHeight > s1T && navHeight < s1B) {
    $("navbar").css('background-color', 'red');
    return;
  }

  //Se a base do <navbar> estiver sobre #sec2 
  if (navHeight > s2T && navHeight < s2B) {
    $("navbar").css('background-color', 'blue');
    return;
  }

  //Se a base do <navbar> estiver sobre #sec3
  if (navHeight > s3T && navHeight < s3B) {
    $("navbar").css('background-color', 'green');
    return;
  }

  //Se a base do <navbar> não estiver sobre nenhum <section>  
  $("navbar").css('background-color', 'black');

});

//Recalcula os valores estáticos de topo e base para os elementos <section> e <navbar> caso a janela do navegador seja redimensionada
$(window).resize(function() {
  sec1Top = $("#sec-1").offset().top
  sec1Botton = sec1Top + $("#sec-1").outerHeight()
  sec2Top = $("#sec-2").offset().top
  sec2Botton = sec2Top + $("#sec-2").outerHeight()
  sec3Top = $("#sec-3").offset().top
  sec3Botton = sec3Top + $("#sec-3").outerHeight()
})

navbar {
  color: #FFF;
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: #000;
}

section {
  width: 100%;
  height: 100vh;
}

#sec-1 {
  background-color: red;
  /* Inseri uma margem para melhorar a visualização do resultado do algorítimo*/
  margin-top: 61px;
}

#sec-2 {
  background-color: blue;
}

#sec-3 {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<navbar>
  <a href="">Link 1</a>
  <a href="">Link 2</a>
  <a href="">Link 3</a>
</navbar>

<section id="sec-1"></section>
<section id="sec-2"></section>
<section id="sec-3"></section>