Skip to content
forked from dubroe/sticky-div

A jquery plugin that forces a div to stick to the top of the window if the user tries to scroll past it

Notifications You must be signed in to change notification settings

ADTC/sticky-div

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 

Repository files navigation

sticky-div

A jQuery plugin that forces a div to stick to the top or bottom of the viewport if the user scrolls past it.

Inspired by the blog post "Stick div at top after scrolling" by YJL.

Sample usage:

HTML:

<div id="my_div">
  ...
</div>

JavaScript:

$('#my_div').sticky_div();

// Or:

var options = {
  top: 0,
  min_screen_width: 0,
  min_screen_height: 0,
  bottom: 0,
  stick_bottom: false,
  outer_div: null,
  style_css: null
};
$('#my_div').sticky_div(options);

Options:

  • top (default: 0px)
    This represents the buffer you want between the top of the page and the div in pixels.

  • min_screen_width (default: 0px)
    This represents the minimum screen width that the stickiness will be applied at.

  • min_screen_height (default: 0px)
    This represents the minimum screen height that the stickiness will be applied at.

  • bottom (default: 0px)
    This represents the buffer you want between the bottom of the page and the div in pixels.

  • stick_bottom (default: false)
    This is a boolean value (true/false) to indicate if the sticky div sticks to the bottom of the viewport.

  • outer_div (default: null)
    This is a jQuery or DOM element whose height needs to be greater than the div in order to make it sticky.

  • style_css (default: null)
    This is an optional setting that allows you to specify a CSS class to extend the styles applied to the sticky div.

About

A jquery plugin that forces a div to stick to the top of the window if the user tries to scroll past it

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%