jQuery Fixed Header Plugin & Tutorials with Example

jQuery ScrollUpBar Plugin

jQuery ScrollUpBar Plugin

The scroll up bar plugin (jQuery) hides the top bar when scrolling down, and show it when scrolling up. It’s specially useful on mobile interfaces to save some precious space.

Midnight.js : jQuery plugin to Switch Fixed Headers on the fly

Midnight.js : jQuery plugin to Switch Fixed Headers on the fly

A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it.

Stkr : jQuery plugin for Fixed Elements

Stkr : jQuery plugin for Fixed Elements

jQuery plugin for fixed elements on a web page.An easy way to control when and where fixed elements appear on your web page.

StickyFooterNav : Responsive Mega Footer with CSS3 & jQuery

StickyFooterNav : Responsive Mega Footer with CSS3 & jQuery

StickyFooterNav is a unique mega footer solution designed and coded to work and fit on any device. It is fully responsive and comes with a flexible grid system to hold your content within panels.

Features:

  • 100% Responsive & powerful mega footer system
  • 3 types of drop downs (fixed width, mega and full browser width)
  • Unique full browser width panels
  • Sticks to the bottom of the browser
  • Flexible columns grid
  • Left or right alignment for the menu items and the drop downs
  • Custom & automatic scrollbars within panels
  • Clean and professional design
  • Fits into any layout
  • Lots of styled elements

Secondary Fixed Navigation with CSS3 & jQuery

Secondary Fixed Navigation with CSS3 & jQuery

A secondary navigation intended for users who want a quick overview of the page content, and be able to easily move from one section of the page to the other.

A fixed navigation with smooth, jQuery powered scroll. Nothing fancy here, yet a handy snippet for creating a secondary menu to quickly surf through the page content. We see this effect a lot these days, a good example I can think of is Disqus For Websites. A nice touch is to animate the logo and the main call-to-action button to slide in once the navigation becomes fixed.

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.

Smart Fixed Navigation with CSS3 & jQuery

Smart Fixed Navigation with CSS3 & jQuery

A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It’s smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution.

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.

Bootstrap Table with jQuery

Bootstrap Table with jQuery

The table displays data in a tabular format and offers rich support to radio, checkbox, sort, pagination and so on. The table has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich.

Features:

  • Created for Bootstrap 3 (Bootstrap 2 supported)
  • Responsive web design
  • Scrollable Table with fixed headers
  • Fully configurable
  • Via data attributes
  • Show/Hide columns
  • Show/Hide headers
  • Get data in JSON format using AJAX
  • Simple column sorting with a click
  • Format column
  • Single or multiple row selection
  • Powerful pagination
  • Card view
  • Localization


Best jQuery websites design awards