stick menu example in jquery

<style type="text/css">
#header{
width:100%;
width: 100%;
text-align: center;
background-color: rgb(111, 144, 250);
margin-bottom: 12px;
padding-bottom: 20px;
padding-top: 20px;
font-weight: bold;
border-radius: 10px;
}

#text{
text-align:center;
}

#menu { background:#eee; overflow: hidden; width: 100%; text-align:center; border-radius:8px}
#menu ul { margin: 0; padding: 0 30px; float: right; }
#menu ul li { margin: 0; padding: 0; list-style: none; float: left;}
#menu ul li a { display: block;color: #008080;text-decoration: none;font-weight: bold;margin: -8px;padding: 10px 16px;float: right; }

#menu.fixed { position: fixed; top: 0px; }

#demo { height: 1500px; }</style>
<div id="menu">
<ul>
<li>
<a href="http://localhost:8080/web/democollege/enroll">Discover</a></li>
<li>
<a href="http://localhost:8080/web/democollege/engage">Engage</a></li>
<li>
<a href="http://localhost:8080/web/democollege/enroll">Enroll</a></li>
<li>
<a href="http://localhost:8080/web/democollege/learn">Learn</a></li>
<li>
<a href="http://localhost:8080/web/democollege/achievements">Achieve</a></li>
<li>
<a href="http://localhost:8080/web/democollege/graduate">Graduate</a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script>
(function($){
  $(function(){
    var $stick = $('#menu');
if($stick.length){
var $window = $(window);
var top = $stick.offset().top - parseFloat($stick.css('marginTop').replace(/auto/, 0));
$window.scroll(function (event) {
var y = $window.scrollTop();
if(y >= top){
$stick.addClass('fixed');
}else{
$stick.removeClass('fixed');
}
});
}
  });
})(jQuery);
</script><table border="0" cellpadding="0" id="mytable2" style="border-radius: 8px; background-color:#F0FFFF;">
<tbody>
<tr>
<td>
<div id="header">
<h2>Discover</h2></div>
</td>
</tr>
<tr>
<td align="center">
<img src="" /><img alt="" src="/image/image_gallery?uuid=be71a901-11c0-41e9-adad-2101271f72a5&amp;groupId=10157&amp;t=1385738577925" style="width: 680px; height: 244px;" /></td>
</tr>
<tr>
<td align="center">
<h3>
Information </h3>
</td>
</tr>
<tr>
<td>
<b>Location:</b>
<p>
<br />
I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.</p>

<p>
<br />
I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here. I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.</p>

<p>
<br />
I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.</p>
<p>
<br />
I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.</p>
<p>
<br />
I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.</p>
I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here..I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.I am paragraph here you can write your own articles content here.</p>
</td>
</tr>
</tbody>
</table>
<br />

Search This Blog

All the rights are reserved to this blog is belongs to me only.. Powered by Blogger.