/ScrollToFixed

This plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.

MIT LicenseMIT

ScrollToFixed

This plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.

Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.

This plugin has been tested in Firefox 3+, Google Chrome 10+ Safari 5+, Internet Explorer 8/9, and Opera 11.60+.

Usage

Default options:

$(document).ready(function() {
  $('#mydiv').scrollToFixed();
});

Margin and Limit options:

$(document).ready(function() {
  $('#cart').scrollToFixed({ marginTop: 10, limit: $($('h2')[5]).offset().top });
});

Fixed Header and Fixed Footer with a Limit

// The fixed footer will go unfixed to reveal whatever is below it when scrolled
// past the limit.
$(document).ready(function() {
  $('.header').scrollToFixed();
  $('.footer').scrollToFixed( { bottom: 0, limit: $('.footer').offset().top } );
});

Very Full Example

$(document).ready(function() {
    $('.header').scrollToFixed({
        preFixed: function() { $(this).find('h1').css('color', 'blue'); },
        postFixed: function() { $(this).find('h1').css('color', ''); }
    });
    $('#summary').scrollToFixed({
        marginTop: $('.header').outerHeight() + 10,
        limit: $('.footer').offset().top - $('#summary').outerHeight() - 10,
        zIndex: 999,
        preFixed: function() { $(this).find('.title').css('color', 'blue'); },
        preAbsolute: function() { $(this).find('.title').css('color', 'red'); },
        postFixed: function() { $(this).find('.title').css('color', ''); },
        postAbsolute: function() { $(this).find('.title').css('color', ''); }
    });
    $('.footer').scrollToFixed( {
        bottom: 0,
        limit: $('.footer').offset().top,
        preFixed: function() { $(this).find('h1').css('color', 'blue'); },
        postFixed: function() { $(this).find('h1').css('color', ''); }
    });
});

Triggers

  $('.header').trigger('remove'); // Removes scrollToFixed from the element.

  $('.header').trigger('resize'); // Resizes the spacer in case the fixed element height changes.
                                  // Good for size changes to the fixed element.
  
  $(window).scroll(); // Causes the plugin to recalculate the window scoll.
                      // Good for layout changes that could change the fixed element's response to
                      // the scroll.  Example: the fixed element height expands which should cause
                      // it to invoke its limit.

  $(window).resize(); // Causes the plugin to recalculate the element offsets, then the window scroll.
                      // Good for layout changes that could cause the fixed element to move.
                      // Example: the header height increases which should cause the fixed 
                      // element to fix at a greater vertical scroll position.

Options

  • marginTop - the number of pixels between the top of the window and the fixed element.
  • limit (value|function) - the vertical scroll position at which the element will begin to scroll up the page (absolutely).
  • bottom - (fix to bottom) the number of pixels between the bottom of the window and the bottom of the fixed element.
  • zIndex - the z-index of the fixed element.
  • spacerClass - the class to add to the spacer for styling purposes.
  • preFixed - the function handler triggered just before the element goes fixed.
  • fixed - the function handler triggered just after the element goes fixed.
  • postFixed - the function handler triggered just after the element leaves fixed.
  • preUnfixed - the function handler triggered just before the element goes unfixed.
  • unfixed - the function handler triggered just after the element goes unfixed.
  • postUnfixed - the function handler triggered just after the element leaves unfixed.
  • preAbsolute - the function handler triggered just before the element goes absolute.
  • postAbsolute - the function handler triggered just after the element leaves absolute.

Demos

Contributors