Menu effect slowly appear css

Navigation
1

asked by anonymous 19.01.2017 / 01:32

2 answers

2

I made an example here using jQuery, which, upon detecting scroll bar movement, checks its position with .scrollTop() and changes the menu property, depending on the movement of the bar. Note that the transition effect is in the css in the following line: 

transition: 0.5s ease-in;

See the result: 

$(document).ready(function() {
  $(document).scroll(function() {
    if ($(this).scrollTop() > 200) {
      $("#menu").css("background-color","#fff");
    } else {
      $("#menu").css("background-color","#000");
    }

  });
});
* {
  margin: 0;
  padding: 0;
}
#menu {
  position: fixed;
  padding:20px;
  background-color: #000;
  width: 100%;
  transition: 0.5s ease-in;
  text-align:center;
}
#menu a{color:#0dc; font-family:Arial; font-size:18px}

#todo {
  height: 1200px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="menu">
<a>Sou um menu</a>
</div>
<div id='todo'></div>
    
19.01.2017 / 02:24
0

If it is only in css, try a "transition: 1s;" where 1s refers to 1 second

    
19.01.2017 / 01:35
Problem with return of AJAX request How to make a script in python run two processes simultaneously?