jQuery Fixed Header Plugin & Tutorials with Example

StickemUp! : jQuery plugin to make Elements Sticky

StickemUp! : jQuery plugin to make Elements Sticky

Stick Em Up is a jQuery plugin that provides easy way to determine when an element has been reached, passed, and passed back.

The plugin will also tell you what direction the user was scrolling when it hit that element, and fires an optional callback during scrolling to do what you please with this information.

Auto-Hide Sticky Header with JavaScript & CSS3

Auto-Hide Sticky Header with JavaScript & CSS3

Auto-hide sticky header is a shot that shoots down two rabbits: makes site navigation easily accessible anywhere on the page and saves content space at the same.

jQuery Sticky Navigation with Smooth Effect

jQuery Sticky Navigation with Smooth Effect

In this quick tutorial we’re going to use jQuery and make a simple sticky navigation. With that done, we’ll improve on our efforts by using jQuery Waypoints to make the effect smoother.

CSS3 Sliding Header Layout

CSS3 Sliding Header Layout

Today we’d like to show you how to create a simple grid layout with a special header effect. The idea is to initially show a fullscreen image with a title and a toggle button that allows to change the view to a grid. The header with the fullscreen image animates upwards and reveals a grid of image anchors with a title. We’ll be using some techniques like Flexbox and CSS Transitions for modern browsers.

Shrinking Fixed Top Bar with jQuery & CSS3

Shrinking Fixed Top Bar

A very common trend these days is the use of a fixed navigation, which shrinks to become less intrusive as the user scrolls down the page. In this tutorial, I’m going to show you how you can achieve this by using ZURBs Foundation Top Bar, some custom sass and jQuery. To top it off we’ll add a couple of media queries to make our menu responsive.

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.



Best jQuery websites design awards