Manipulate the Scroll event in Jquery

Asked

Viewed 1,076 times

0

Good afternoon,

I have a Navbar that starts transparently i Seto this via query:

$( "nav" ).css('border', 'none', 'important');
$("#hamburguer").css('background-color', 'transparent', 'important');

So far beauty, but when I go down I want her to go back to the normal properties of the bootstrap, and when I give the scroll up she would be transparent again. Any suggestions? Grateful.

javascript jquery html css twitter-bootstrap

1 answer

1


You can define the style rolling up.

When rolling down, remove the style thus leaving the tag nav as defined in the style sheet.

I used style = border: 1px solid just to facilitate the visualization in the example.

$(document).ready(function() {$('nav').attr('style', 'border: 1px solid');});

var st = 0;
$(document).on('scroll', function(event){

   var st2 = $(this).scrollTop();
   
   if (st2 > st){   
       
    if ($('nav').attr('style') !== undefined) {
       
    $('nav').removeAttr('style');
    
    }
       
       
   } else {
      
      if ($('nav').attr('style') === undefined) {
      
      $('nav').attr('style', 'border: 1px solid');
      
      }
      
   }
   
   st = st2;
   
  
});
html, body {height: 400px; background-color: #e5e5e5}

nav {position: fixed}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html><body>

<nav>nav</nav>

</body></html>

Browser other questions tagged javascript jquery html css twitter-bootstrap

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