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.
Pull request Compare This branch is 148 commits behind bigspotteddog:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
jquery-scrolltofixed-min.js
jquery-scrolltofixed.js
license.txt
test-min.html
test.html

README.md

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', ''); }
    });
});

Remove

$('.header').trigger('remove');

Demos

Contributors