Sticky sidebar

Component ID

1257320

Component name

Sticky sidebar

Component type

module

Maintenance status

Development status

Component security advisory coverage

not-covered

Component created

Component changed

Component body

This module allows you to set a number of sidebar or block regions that follow the user down the page as they scroll.

It's a nice user interface technique for drawing attention to ads, showing the contents of a shopping cart, or anytime that you want to draw a users attention to some important sidebar content.

See the sticky sidebar example here.

The module is based on Phil Parson's Sticky Sidebar JQuery Plugin - you'll need to download that script for the module to run.

Tested in IE6-9 and all the other major browsers.

Simple to configure via the Drupal admin interface. Users can set:

  • Speed – how long the animation of the box should take in milliseconds
  • Easing – what type of easing to use for the animation e.g. Linear, JSwing etc.
  • Padding – how many pixels to pad the element from the top of the window
  • Constrain – if true, this stops the sticky area from scrolling out of the parent area

Installation

  • Upload and unzip the module to your sites/all/modules folder.
  • Visit: https://github.com/p-m-p/jQuery-Stickybox
    • Copy the stickysidebar.jquery.js & jquery.easing.1.3.js files to the module folder, so they can be found at:
      - sites/all/modules/sticky_sidebar/stickysidebar.jquery.js and
      - sites/all/modules/sticky_sidebar/jquery.easing.1.3.js
  • Enable the module in the Drupal 7 admin area
  • Visit user/config/user-interface/sticky-sidebar to configure the module
  • Enter the CSS seletor of the area you wish to to be sticky, e.g. #block-block-1
  • The specified div should now by sticky

If you have more than one block of content in a sidebar then you may encounter problems with them overlapping. It's best to keep the sidebar empty of other block elements.