Sticky sidebar
Component ID
Component name
Component type
Maintenance status
Development status
Component security advisory coverage
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
- Copy the stickysidebar.jquery.js & jquery.easing.1.3.js files to the module folder, so they can be found at:
- 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.
