Menu effect appear slowly css

Asked

Viewed 1,478 times

1

html5 css3

2 answers

2


I made an example here using jQuery, which when detecting the movement of the scroll bar, checks its positioning with .scrollTop() and change the menu property as the bar moves. Note that the transition effect is in 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>
<div id="menu">
<a>Sou um menu</a>
</div>
<div id='todo'></div>

0

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

Browser other questions tagged html5 css3

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