Best jQuery Fixed Header Plugins & Tutorials with Demo

    headroom.js : Hide your header until you need it

    headroom.js : Hide your header until you need it

    Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll. The header on demo site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.

    stickUp : jQuery Plugin to “sticks” an Element

    stickUp : jQuery Plugin to "sticks" an Element

    stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.

    Fixed header and column jQuery Datatables

    Fixed header and column jQuery Datatables

    Uses jQuery datatables to make a responsive datatable with a fixed header and a fixed column.

    Features:

    • Regular markup
    • Styled with Bootstrap 2.3.2
    • Scrolls to first non-empty cell when you click header or left column
    • Resizes height and width on browser resize

    jQuery ScrollChaser

    jQuery ScrollChaser

    Create a sticky floating fixed/scrolling sidebar.

    Sticky-Kit : jQuery plugin for Smart Sticky elements

    Sticky-Kit : jQuery plugin for Smart Sticky elements

    A jQuery plugin for making smart sticky elements.Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

    jQuery Top Bar Offers Promoter

    jQuery Top Bar Offers Promoter

    The jQuery Top Bar Offers Promoter is the best way to emphasize the offers on your website. All the special offers will be instantly seen by your potential buyers.

    Features:

    • Over 50 js options from where you can customize the plugin.
    • You have parameters to change anything: colors, images, backgrounds, borders, dimensions.
    • The top bar promoter is responsive for both fixed dimensions or full width versions.
    • It is compatible with IOS and Android operating systems.
    • Options to add social icons in order to promote your website on all the available channels.
    • SEO Friendly
    • Centered or full width

    On Scroll Header Effects with jQuery & CSS3

    On Scroll Header Effects with jQuery & CSS3

    You’ve surely seen those really cool on scroll effects for headers that have been around lately. One example is the header on the Riot Industries website by Phil Renaud which rotates in 3d on click and enlarges when scrolling down. Similar work has been done by Johnny Simpson where he explores Scroll Activated Fixed Header Animations. We’ve also created a Blueprint for an On-Scroll Animated Header to get you started.

    Today we’d like to give you some inspiration for animated headers and show you what kind of effects could be used to spice up your website’s starting element and give it some life.

    Scroll Activated Fixed Header Animations with jQuery & CSS3

    Scroll Activated Fixed Header Animations with jQuery & CSS3

    It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.

    Smint : jQuery Navigation plugin for One Page website

    Smint : jQuery Navigation plugin for One Page website

    Smint is a simple jQuery plugin that helps with the navigation on one page style websites.

    It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.