jQuery Fixed Header Plugin & Tutorials with Example

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

On-Scroll Animated Header with CSS3 & jQuery

On-Scroll Animated Header with CSS3 & jQuery

We present the very popular fixed, on scroll animated header that changes it’s size and the orientation or visibility of the components within based on the user’s scroll action. As the user begins to scroll and engage with content, the header area is elegantly minimized to leave more of the viewport open for content.

jQuery Bootstrap Auto-Hiding Navbar

jQuery Bootstrap Auto-Hiding Navbar

jQuery Bootstrap Auto-Hiding Navbar is an extension for Bootstrap’s fixed navbar which hides the navbar while the page is scrolling downwards and shows it the other way. The plugin is able to show/hide the navbar programmatically as well.

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.

Pagescroll : jQuery animated scroll Menu

Pagescroll : jQuery animated scroll Menu

Create animated scroll menu with jQuery

Features:

  • vertical or horizontal display
  • absolute, fixed or inline styles
  • left, right, top or bottom aligns
  • configurable background color, font sizes, colors also configurable via CSS
  • smooth animation during pagescroll
  • fade in / fade out effect when user scrolling


Best jQuery websites design awards