Hiding / Showing a navbar according to scrolling

Question

Hiding / Showing a navbar according to scrolling

Navigation

#1 by (2 votes)

1

Next, I have this code:

// Function that hides / shows subnavbar according to scrolling

$('#view-2').scroll(function() {
  var topo = $(this).scrollTop(); // = 0
    if (topo > 0){
        $('.subnavbar').fadeOut();
    } else {
      $('.subnavbar').fadeIn();
    }
    console.log(topo);
 });

It works perfectly, but I wanted to make the navbar appear again with a scrollup (scrollUp)?

Could you help me with logic and solution?

javascript rolamento

asked by anonymous 28.09.2018 / 18:31

1 answer

How to replace an index with a String Select for a specific period in MySQL

score 2 · Accepted Answer

Easy friend just put the code like this:

anterior = 0;
$('#view-2').scroll(function() {
  var topo = $(this).scrollTop(); // = 0

    if (topo > 0){
        if(topo < anterior){
           $('.subnavbar').fadeIn();
        }else{
           $('.subnavbar').fadeOut();
        }
    } else {
      $('.subnavbar').fadeIn();
    }

    anterior = topo; 
    console.log(topo);
 });

Explanation:

Basically what you need to do is define a global variable called above, which is the previous value of the top in scrollagem , and every time the top changes the previous value is saved, and you check if the top is smaller than the previous one, then shows the subnavbar