30 Minutes Timer Coding (HTML-JS-CSS) & Become Fix At The Top On Scroll

Time left :30 mins : 00 secs

<!-- COPY THE CODE GIVEN BELOW, AND PASTE IT IN HTML/JAVASCRIPT PAGE --> <html><div class="Ss"> <div align="center"> <h1> <td width="87%" align="center" valign="middle"><a class="button_example" href="http://tinyurl.com/qha7clc/">Time left :<span id="countdown" class="timer">30 mins : 00 secs</span> </a></div> </div> <script type="text/javascript">var seconds=1800;function secondPassed(){seconds--;var a=parseInt(seconds/60);var b=parseInt(seconds%60);if(b<10){b="0"+parseInt(b)}document.getElementById('countdown').innerHTML=a+" mins : "+b+" secs";if(parseInt(seconds)===0){alert("Time is over");clearInterval(countdownTimer);document.getElementById('countdown').innerHTML="Time is Over";document.forms["myForm"].submit()}}var countdownTimer=window.setInterval(function(){secondPassed()},999);</script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"> </script> <script type="text/javascript"> jQuery("document").ready(function($){var nav = $('.Ss'); var pos = nav.offset().top; $(window).scroll(function () {var fix = ($(this).scrollTop() > pos) ? true : false; nav.toggleClass("sp", fix);}); });</script></td></h1> <style type="text/css"> .button_example{border:1px solid #8bcf54;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:20px;font-size:30px;font-family:arial,helvetica,sans-serif;padding:10px;text-decoration:none;display:inline-block;text-shadow:-1px -1px 0 rgba(0,0,0,0.3);font-weight:700;color:#fff;background-color:#a9db80;background-image:-webkit-gradient(linear,left top,left bottom,from(#a9db80),to(#96c56f));background-image:-webkit-linear-gradient(top,#a9db80,#96c56f);background-image:-moz-linear-gradient(top,#a9db80,#96c56f);background-image:-ms-linear-gradient(top,#a9db80,#96c56f);background-image:-o-linear-gradient(top,#a9db80,#96c56f);background-image:linear-gradient(to bottom,#a9db80,#96c56f);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#a9db80,endColorstr=#96c56f)}.button_example:hover{border:1px solid #74bf36;background-color:#8ed058;background-image:-webkit-gradient(linear,left top,left bottom,from(#8ed058),to(#7bb64b));background-image:-webkit-linear-gradient(top,#8ed058,#7bb64b);background-image:-moz-linear-gradient(top,#8ed058,#7bb64b);background-image:-ms-linear-gradient(top,#8ed058,#7bb64b);background-image:-o-linear-gradient(top,#8ed058,#7bb64b);background-image:linear-gradient(to bottom,#8ed058,#7bb64b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#8ed058,endColorstr=#7bb64b)} .sp {z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}</style></html>