stickyPanel plugin is available at their Google project page in <a href="http://code.google.com/p/sticky-panel/" target="_blank" class="news_link" title="Download page">this link</a>. Demo pages are also available in that link. 


<h4>
The Javascript
</h4>

In one of our target pages, we included the following snippet just before the closing &lt;/head> tag of the page, making sure we point the Javascript src to the location of our downloaded plugin copy.



<pre class="brush: xml">
&lt;!--
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">&lt;/script>
-->
&lt;script type="text/javascript" src="./js/jquery.stickyPanel.min.js">&lt;/script>
&lt;script type="text/javascript">
 jQuery().ready(function () {
 var stickyPanelOptions = {
 topPadding: 0,
 afterDetachCSSClass: "sticky_after_detach",
 savePanelSpace: true
 };

 jQuery("#panel_k").stickyPanel(stickyPanelOptions);
	/*
	jQuery("#more_panels").stickyPanel(stickyPanelOptions);
	*/
 });
&lt;/script>
</pre>



We did not include jQuery itself because we are using the bundled JQuery in PrimeFaces. Uncomment the first line if you are not using PrimeFaces and use $ instead of jQuery in line 6 and 13.


In line #13, we have panel_k as the ID of the div element that will serve as the sticky panel. This div panel should have stickypanel style class.


sticky_after_detach style class in line #9 is applied to our div as soon as it starts to stick to the top. See further down below to see the details of this class. Use topPadding if you wished to add padding between the sticky and the top edge.


<h4>
HTML/JSF
</h4>

Below is the HTML/JSF marked up. It is a PrimeFaces menubar wrapped with a div with the required stickypanel class. You can use any standard HTML elements within the sticky.



<pre class="brush: xml">
&lt;div id="panel_k" class="stickypanel sticky_main">
 &lt;p:menubar style="background-color: darkseagreen;
 font-size: 9px;
 padding:0px;border:0px;
 font-style: italic;
 font-weight: normal;"
 autoSubmenuDisplay="true" >
 &lt;p:menuitem value="&nbsp;" disabled="true"/>
 &lt;p:menuitem value="[" style="color:blue;" disabled="true"/>
 &lt;p:menuitem url="/index.xhtml" icon="ui-icon ui-icon-home" value="Home" />
 &lt;p:menuitem icon="ui-icon ui-icon-script" value="Philippine History" 
		url="/PhilippineNewsIndex.xhtml?b=day" />
 &lt;p:menuitem icon="ui-icon ui-icon-gear" value="Primo's code blogs" 
		url="/HowtoBlogsIndex.xhtml" />
 &lt;/p:menubar>
&lt;/div>
</pre>


<h4>
The CSS classes
</h4>


In our implementation we added another class sticky_main which is the style of the panel when attached to its original position. sticky_after_detach, as already mentioned, is applied to our panel after it is detached and positioned at the top of the page.



<pre class="brush:css">
.sticky_main {
	background-color:darkseagreen;
	position:relative;
	z-index:999;
	height:28px;
	width:1024px;
	left:0px;
	display:inline-block;
}

.sticky_after_detach {
	background-color:darkseagreen;
	position:relative;
	z-index:999;
	height:28px;
	width:1024px;
	left:0px;
	display:inline-block;
	filter:alpha(opacity=90);
	-moz-opacity:0.90;
	-khtml-opacity: 0.90;
	opacity: 0.90;
}
</pre>




That's it. Good luck.

Using jQuery plugin stickyPanel in HTML and PrimeFaces/JSF pages