Hide/Show navbar according to scrolling

Asked

Viewed 54 times

1

Next friends, 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);
 });

Works perfectly, but wanted to make, with a scroll up (scrollUp), appear again the navbar?

Could help me with logic and the solution?

javascript rolling

1 answer

2


Easy buddy 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 earlier, which is the previous value of the top in scrollagem, and then every time the top changes the previous value is saved, and you check if the top is smaller than the previous one, then it shows the subnavbar

Browser other questions tagged javascript rolling

You are not signed in. Login or sign up in order to post.