Today’s post is a collection of good jQuery plugins which handle scrolling of elements to keep them in view (sticky scroll) when you scroll the webpage down. Enjoy.

1. Sticky

A jQuery plugin that gives you the ability to make any element on your page always stay visible.

Sticky.jpg
Source + Demo

2. stickyMojo

A contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+.

stickyMojo.jpg
Source

3. Sticky Sidebar jQuery plugin

Allows you to set a number of sidebar or floating boxes that follow the user down the page as they scroll.

Sticky-Sidebar.jpg
SourceDemo

4. lockfixed jQuery plugin

A jQuery plugin which allows for DOM elements to be positioned anywhere on the page, and lock within the user’s viewport when scrolling.

LockFixed.jpg
SourceDemo

5. stickyfloat

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.

StickyFloat.jpg
SourceDemo

6. Sticky Footer

This Sticky Footer can contain any kind of content and is ready to be used in your website. You can build your own menu and use from 1 to 12 columns to display your content.

StickyFooter.jpg
SourceDemo

7. Sticklr

Sticky Side Panel CSS3 + jQuery Plugin

Sticklr.jpg
SourceDemo

8. fixedposition

A powerful CSS attribute, that allows you to fix a HTML element to a position on the page, irrespective of user interaction. Put simply, if the user scrolls, it stays put.

FixedPosition.jpg
Source + Demo

9. jQuery Sticky Sidebar

Sticky sidebar for your content.

jQuery-Sticky-Sidebar.jpg
Source + Demo

10. jquery.fixer.js

Fix element like any other plugins it do.

jQueryFixerjs.jpg
Source + Demo

11. StickyScroll

A jQuery plugin for creating elements that ‘stick’ to the top of the window when scrolling down the page.

StickyScroll.jpg
SourceDemo

12. Sticky-Element

jQuery plugin to make an element scroll with the page inside the boundaries of a specified container or the window.

Sticky-Element.jpg
SourceDemo

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • Pingback: Sticky Scrolls - 12 Free Plugins | ViewLikeUs - Check Sites in Various Resolutions! | Blog()

  • Magister Magenta

    Isn’t there a non-jquery plugin for this? I’ve searched everywhere for it, no dice.

    • http://jquery4u.com/ jQuery4u

      Use jQuery! :)

      • Magister Magenta

        Why? So my app can get more bloated?

        • Oink

          So your app doesn’t get slower with more useless plugins.

  • Dzagro

    thanks its very helpfull

  • SMARTIC

    GREAT collection, thanks…

  • uiuiu

    hjhjhjhj

  • uiuiu

    hghghgh

  • Greg Matson

    holy fuck

  • Myles English

    Great list. I’m going to shamelessly add one of my own jQuery plugins called Sticky Stick to the list as I couldn’t find any other plugin that would do what I needed. I’m sure there are some other developers out there that would find this useful. Check out the JSFiddle here: http://jsfiddle.net/Bijingus/cuj1bnsn/ and grab it on GitHub here: https://github.com/Bijingus/sticky-stick

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.