Best jQuery Fixed Header Plugins & Tutorials with Demo

    Create a Sticky Navigation Header Using jQuery Waypoints

    Create a Sticky Navigation Header Using jQuery Waypoints

    In this tutorial, we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off. we’re going to use one of HTML5′s new elements, the navtag, as a container for a horizontal list of links. I’ll briefly explain how to make it look pretty using a little bit of CSS.

    Most importantly, you’ll make yourself familiar with the basics of jQuery’s Waypoints plugin, which will provide advanced functionality: as the user scrolls down, the navigation bar will stick to the top of the viewport, as well as change to indicate the current section. As a little added touch, we’ll use another plugin, ScrollTo, in order to provide smooth scrolling and convenient positioning when the user clicks on the navigation links.

    stickyMojo.js : Fixed positioned Sticky sidebar jQuery plugin

    stickyMojo.js : Fixed positioned Sticky sidebar jQuery plugin

    stickyMojo is a contained sticky sidebar plugin for jQuery. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+. It will degrade gracefully in older versions of IE.

    jQuery Sticky Header

    jQuery sticky header

    In this tutorial we will create sticky header that is initially on its original place above the content, but as soon we start scrolling down the long page, it sticks at the top of the page.When scrolling up the page, the sticky header stops sticking and returns to its original position. We will use jQuery to create the sticky header.

    Fixed Table of Contents Drop-Down Menu a jQuery Plugin

    Fixed Table of Contents Drop-Down Menu a jQuery Plugin

    A fixed table of contents drop-down menu jQuery plugin. It’s a one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style.

    Sticky Sidebar jQuery plugin

    Sticky Sidebar jQuery plugin with Demo

    Sticky Sidebar jQuery plugin allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll. The plugin uses absolute positioning calculated from the original css and offset to either the closest positioned parent or to the document. The plugin has been tested in IE6-9 and all the other major browsers.

    jQuery Scrollable Table Plugin

    jQuery Scrollable Table Plugin

    This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table. Scrollable tables are most useful when having to display lots of tubular data in a fixed space.

    The tablescroll jQuery plugin is a simple markup manipulation plugin, it will manipulate the table, create a couple of new elements and wrap everything in a DIV.

    Curtain.js – Create a page with multiple fixed panels that unroll with an jQuery amusing effect

    Curtain.js – Create a page with multiple fixed panels that unroll with an jQuery amusing effect

    This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises.

    To navigate, you can use your keyboard instead the scrollbar or your mousewheel to navigate into the document. But that’s not all, there is more features! You can easily add a fixed element or multiple “steps” element into a pannel.

    Creating A Sticky Sidebar Using jQuery

    Creating A Sticky Sidebar Using jQuery

    Today, I will be showing how to create a jQuery sticky sidebar script. Now, I’m sure many of you have a question: Why can’t I just use “position:fixed”?

    A navigation menu that stays on top with jQuery

    A navigation menu that stays on top with jQuery

    This is an easy way to make a navigation menu that sticks to top of the window while scrolling down the page. We want the menu to stick to the top only after we’ve scrolled down further than its original position. A few lines of jQuery will to the trick.

    jQuery ScrollToFixed

    jQuery ScrollToFixed

    This plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.

    Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.