Fixed Relative

Goal: a simple, efficient jQuery plugin to simulate having a child element "fixed" relative to an ancestor

Example Usage

Using the following markup:

<!-- relatively positioned container -->
<article class="post">

  <h1>Some Title</h1>
  <p>Some long... content</p>

  <!-- element simulated as fixed relative to the parent ARTICLE -->
  <div class="fixed-relative-wrapper">
    <div class="fixed-relative">
      
      <a href="javascript:facebook()">Facebook</a>
      <a href="javascript:twitter()">Twitter</a>
      <a href="javascript:google()">Google+</a>

    </div>
  </div>

</article>

Provide the following styles:

.post {
    position: relative;
}

.fixed-relative-wrapper {
    position: absolute;
    top: 20px;
    right: 40px;
    width: 90px; /* this is important! */
}

.fixed-relative-wrapper-bottom {
    top: auto;
    bottom: 20px;
}

.fixed-relative {
    /* your styles */
}

.fixed-relative-fixed {
    position: fixed;
}

The JavaScript:

(function($){

  $('.post').fixedRelative();

})(jQuery);

This will place the "fixed" element in the upper right-hand corner of the article.post element.

Once the top of the article.post element has gotten close enough to the top of the browser window, the div.fixed-relative element will add the fixed-relative-fixed class and follow as the user scrolls.

Once the bottom of the article.post element has gotten close enough to the top of the browser window, the div.fixed-relative element will lose the fixed-relative-fixed class and the div.fixed-relative-wrapper element will obtain the fixed-relative-wrapper-bottom class, forcing the element to stick to the bottom of article.post element.

Options

fixedEl

Default value: .fixed-relative

The element that will have the fixed positioning applied to it

wrapperEl

Default value: .fixed-relative-wrapper

The element that will have absolute positioning applied to it

fixedClass

Default value: fixed-relative-fixed

The class applying fixed position

wrapperClass

Default value: fixed-relative-wrapper-bottom

The class applying the bottom CSS value

top

Default value: 58

Trigger changes when the relatively positioned element's top is this distance from the top of the window

bottom

Default value: 215

Trigger changes when the relatively positioned element's bottom is this distance from the top of the window

Configuration

$.fixedRelative.setTimer(/*{Number}*/ n)

The timeout value is by default set to 0. If you pass in a number greater than 0 to this static function there will be a delay between the scroll event and the actual changes triggered.

$.fixedRelative.off()

Unbinds the scroll event. The functionality is removed.

Live Example

You can see the PHP infinite scroll example here. The app might be frozen as it's on a free tier at fortrabbit. Just bug me if it is.

Browser Support

Desktop OS X:

• Chrome 31
• Firefox 26
• Safari 7

Windows 7:

• Chrome 31
• Firefox 25
• IE 9

Windows XP:

• IE 8

Todo

• Clean up all the applied classes when calling the static off method.
• Browser test.
• Probably some other stuff...