Using jQuery plugin stickyPanel in HTML and PrimeFaces/JSF pages

Tuesday February 14, 2012 ()

A stickyPanel described in this blog is a div element positioned anywhere in a HTML page. This div element sticks and remains visible at the top of the page as the page is scrolled down. We have implemented the plugin in our PrimeFaces pages and is currently being used in this page.

stickyPanel plugin is available at their Google project page in this link. Demo pages are also available in that link.

The Javascript

In one of our target pages, we included the following snippet just before the closing </head> tag of the page, making sure we point the Javascript src to the location of our downloaded plugin copy.

<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-->
<script type="text/javascript" src="./js/jquery.stickyPanel.min.js"></script>
<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);
	*/
    });
</script>

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.

HTML/JSF

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.

<div id="panel_k" class="stickypanel sticky_main">
    <p:menubar   style="background-color: darkseagreen;
                    font-size: 9px;
                    padding:0px;border:0px;
                    font-style: italic;
                    font-weight: normal;"
                    autoSubmenuDisplay="true" >
        <p:menuitem  value=" " disabled="true"/>
        <p:menuitem  value="[" style="color:blue;" disabled="true"/>
        <p:menuitem  url="/index.xhtml" icon="ui-icon ui-icon-home" value="Home"  />
        <p:menuitem  icon="ui-icon ui-icon-script" value="Philippine History" 
		url="/PhilippineNewsIndex.xhtml?b=day" />
        <p:menuitem  icon="ui-icon ui-icon-gear" value="Primo's code blogs" 
		url="/HowtoBlogsIndex.xhtml" />
    </p:menubar>
</div>

The CSS classes

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.

.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;
}

That's it. Good luck.


4,673

Comments (Using jQuery plugin stickyPanel in HTML and PrimeFaces/JSF pages)