Java script Header fixed on scroll or, add remove class with jquery
refer this js code for your solution
==========newthink css3=================================================
<script type="text/javascript">// Css Zilla Fixed navigationjQuery(window).scroll(function() { var scroll = jQuery(window).scrollTop();//>=, not <=if (scroll >= 500) {//clearHeader, not clearheader - caps HjQuery("#home").addClass("nav_top");//alert("Css zilla welcomes you");}});</script>
===========================================================
Effect on animation duration
if you want to do some effect on duration then first you need to divide yourElement duration in percentage.
Then give some effect like color , rotation ,skew,matrix.etc.Example:-Got to link below the you will see the live example of coddling below.
<html><head><title>newthink</title>
<!--------------------newthink--------------------->
<style>.yellow {background-color:yellow;
margin-top:100px;width:100px;s
height:50px;
display:block;
position:relative;
animation-name:move;
animation-duration:6s;
animation-iteration-count:4;
animation-iteration-count: infinite;font-size:26px;}
@keyframes move {
0% { background-color:orange; left:0px; top:0px;}
25% { background-color:green; left:100px;top:0px;}
50% { background-color:#0000FF; left:100px; top:100px;}
75% { background-color:#0000FF; left:0px; top:100px;}
100% { left:0px; top:0px; background-color:#993300;}
}
.green {background-color:green;
margin-top:100px;width:100px;
height:50px;display:block;
position:relative;
animation-name:move;
animation-duration:6s;
animation-iteration-count:4;
animation-iteration-count:infinite;
animation-direction: reverse;
animation-timing-function: ease;font-size:26px;}
</style>
</head>
<body>
<h2>css3 animation method</h2>
<div class="yellow">newthink</div>
<div class="green">newthink</div>
<div class="rotation"> hello</div>
</body></html>
