Forum Display Enhancements - Awesome Sticky Top Bar by XiTCLUB

==================
AWESOME STICKY TOP BAR
==================

LIVE DEMO : WWW.XiTCLUB.COM

INSTALLATION

1: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "header" template

Add The Following Code at the End

<div id="stickyBar">
  <ul>
    <li><a href="#">Link1 </a></li>
    <li><a href="#">Link 2 </a></li>
    <li><a href="#">Link 3 </a></li>
    <li><a href="#">Link 4 </a></li>
    <li><a href="#">Link 5 </a></li>
  </ul>
</div>

2: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "additional.css" template

Add The Following Code at the End

#stickyBar
{
  background: rgba(0,0,0, 0.8);
  border-radius: 0 0 0.5em 0.5em;
  display:none;
  height:40px;
}
#stickyBar ul
{
  margin:0px;
  padding: 0;
  list-style:none;
}
#stickyBar ul li
{
  float:left;
  min-width:80px;
  text-align:center;
  border-right:1px solid #ccc;
  font-size: 16px;
    height: 40px;
  line-height: 2.5em;
    padding:0 5px;
}
#stickyBar ul li a
{
  color:#fff;
  display: block;
  width:100%;
  height:100%;
}
#stickyBar ul li a:hover
{
  background: red;
  color:#fff;
}
#stickyBar.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  width:1000px;
 margin:0 auto;
  background: rgba(0,0,0, 0.8);
  border-radius: 0 0 0.5em 0.5em;
  display: block;
}

3: Goto Admincp > Styles & Templates > Style manager > Your Theme > Edit "headinclude" template

Add The Following Code at the End

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('.above_body').offset().top;
  if (window_top > div_top) {
    $('#stickyBar').addClass('stick');
  } else {
    $('#stickyBar').removeClass('stick');
  }
}

$(function() {
  $(window).scroll(sticky_relocate);
  sticky_relocate();
});
</script>

That's it... Enjoy Sticky Top Navigation By XiTCLUB

Update : Updated The Whole Tutorial, because most of peoples are not familiar with programing

You can Buy me a bear if you like this modification, paypal button is at right sidebar

[inigo]

Thanks for your help!!!!!!!!

Finally I can manage with it without knowing so much of css and html.

Recommended!!!!!!

[XiTCLUB]

Originally Posted by inigo

Thanks for your help!!!!!!!!

Finally I can manage with it without knowing so much of css and html.

Recommended!!!!!!

Congratulations :P

[Bob_R]

Cool! Nice work.

Is this one mod (see screenshot) available/supported?

[XiTCLUB]

Originally Posted by Bob_R

Cool! Nice work.

Is this one mod (see screenshot) available/supported?

No, This mod is not available yet

[elitecarders]

Shahzad saab you have a cool forum best of luck i am paki too

[XiTCLUB]

Originally Posted by elitecarders

Shahzad saab you have a cool forum best of luck i am paki too

Thank You Bhai Sahb..

[fxdigi-cash]

Thanks for mod!

However, I have to mention that this script is not compatible with any query version except jquery.min.js so for those who the code didn't for them, I guess it is compatibility issue.

Being said that, we have to add extra script to the header while there are many others already there. I believe it is better to take the advantage of the other used jquery versions that are already in used at vb header....

I know if you decided to change the whole code, it may take some time to re-create the java script that is compatible with all jquery versions.... or at least the one used at vb header...

Thanks

[XiTCLUB]

Originally Posted by fxdigi-cash

Thanks for mod!

However, I have to mention that this script is not compatible with any query version except jquery.min.js so for those who the code didn't for them, I guess it is compatibility issue.

Being said that, we have to add extra script to the header while there are many others already there. I believe it is better to take the advantage of the other used jquery versions that are already in used at vb header....

I know if you decided to change the whole code, it may take some time to re-create the java script that is compatible with all jquery versions.... or at least the one used at vb header...

Thanks

its already compatible, dont just look at code, try to use it without google jquery library tht i included in code

[fxdigi-cash]

Originally Posted by XiTCLUB

its already compatible, dont just look at code, try to use it without google jquery library tht i included in code

I didn't look at the code, I tried it with many jquery versions and the only one that works with your code is jquery.min.js

you can try it out and see yourself if it functions with other jquery versions if you like ...

[HotLink]

It was not working in my IE and if anyone has the same problem, here is how i fixed it:

I replaced:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

with:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

Also, i've added a solid background-color to #stickyBar, a line before the background: rgba(0,0,0, 0.8);

@XiTCLUB
Is there anyway to get the bar displayed after the page scrolls a certain number of px from the top?
By the way, awesome indeed!