jQuery Fixed Header Plugin & Tutorials with Example

Headhesive.js : An on-demand Sticky Header

Headhesive.js : An on-demand Sticky Header

Headhesive.js creates an on-demand sticky header. Specify when you want your header to become fixed and the rest is magic.

Fixed Auto-Hiding Nav Bar with JavaScript

Fixed Auto-Hiding Nav Bar with JavaScript

Top navigation bars have always been popular in web design. Since these elements contain such vital information some designers like to keep them fixed on-screen while scrolling down the page. But unfortunately this can get in the way of content if the bar is too large. A popular online blogging platform Medium created an interesting method of hiding the bar when scrolling down and re-showing it when scrolling back up.

HC-Sticky : jQuery Floating Sticky Plugin

HC-Sticky – jQuery Floating Sticky Plugin

hcSticky is a cross-browser jQuery plugin that makes any element on your page float.

It is used for sidebars on long pages, so they can be visible all the time user scrolls down the page, instead of a empty space visitors usually see. It is also used for floating top menus, emphasizing it to the user at all time.

jQuery Sticky Footer plugin

jQuery Sticky Footer plugin

The jQuery sticky footer plugin sticks your footer, with or without set height, to the bottom of your page. You can also use the sticky footer plugin to stick other elements to the bottom of their parent.

Stickyfloat : jQuery Animated Fixed Position Element Plugin

Stickyfloat : jQuery Animated Fixed Position Element Plugin

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs. This plugin solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.

Features:

  • Can handle many floated elements, each with it’s own settings
  • Floated elements’ movement can be bound inside their parents’ area
  • Uses Native javascript easing, but using CSS3 transitions would be the optimum (not for IE)
  • Has many settings, such as stick to the bottom or animation style
  • Code is very maintainable and higly efficient

Zebra_Pin : jQuery plugin for Pinning any Element to the Page

Zebra_Pin : jQuery plugin for Pinning any Element to the Page

A lightweight and adaptive jQuery plugin for pinning any element to the page or to a container element, so that the element stays visible even if the user scrolls the page. This type of elements are also referred to as “fixed position elements” or “sticky elements”.

You can use it in your projects to create sticky sidebars, sticky navigation, sticky headers and footers, or anything else you feel the need to make it stick to the page while the user scrolls.

Features:

  • elements can be pinned inside a container element, not just to the page
  • custom events are fired when pinning/unpinning elements offering even more control
  • it is small – it weights around 2KB minified offering the best ratio of features per used bytes
  • it’s cross-browser – works in every major browser and IE7+

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.

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.



Best jQuery websites design awards